技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

基于vertical-align的表单元素垂直对齐方式研究

2010-07-15 14:58:13 by 【6yang】, 119 visits, 收藏 | 返回

在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。

经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”

但是经过仔细总结和分析，发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系，两者同时影响着渲染结果。那么，既然现在的情况以及非常接近于希望的状态了，是否可以通过设置字体的方式来改变小写x的中心点的位置，接入对垂直对齐结果进行“微调”呢？

最终，在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。最终代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
</html>

最终效果：

06

至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。文字提示依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：

08

于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：

09

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
<br/><br/>
<input class=”inputcheckbox ” name=”test2″ value=”2″ type=”radio”>
<label>测试文字x</label>
<br/><br/>
<input class=”inputcheckbox ” name=”Text1″ type=”text” />
<label>文字</label>
<input  class=”inputcheckbox ” name=”Text1″ type=”text” />
<label>文字</label>
<br/><br/>
<label>测试文字</label>
<input   class=”inputcheckbox ” name=”Button1″ type=”button” value=”按钮” />
<br/><br/>
<select class=”inputcheckbox ” name=”Select1″>
<option>测试文字</option>
</select>
<label>测试文字</label>
</html>

而且我发现，不但解决了中文的问题，如果提示信息换成其他语言，基本上也能够对齐，至少不会像开始那样偏移太多。下面是截图、代码和一些例子：

07

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>测试vertical-align</title>
<style>
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>這是繁體中文</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>次回から自動的にログイン</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>English</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>Чужой компьютер</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>صفحات من ‏السعودية </label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>회원가입</label>
<br/>
<input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
<label>הפתוח</label>
<br/>
</html>

至此，我的研究过程高于段落。

但是，还是想不通各浏览器为什么最后会显示出这样的效果。牛人们有空可以解释一下吗？

分享到：
我要评论 本文来自:http://www.6yang.net/articles_view.php?id=768&cid=7
share

    图片原图

    loading

    loading