20120904关于复选框和单选框对齐的问题

最近的项目涉及到很多表单的制作&＃xff0c;特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现&＃xff0c;单(复)选框和它们后面的 提示文字在不进行任何设置的情况下&＃xff0c;是无法对齐的&＃xff0c;而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle&＃xff0c;也依 然不能完美对齐。如下图所示&＃xff1a;

于是上网查看了一些网站&＃xff0c;发现这个问题是普遍存在的&＃xff0c;如下图&＃xff08;FF3.5&＃xff09;&＃xff1a;

在很多网站涉及到表单的页面中&＃xff0c;都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先&＃xff0c;搜索到了蓝色上wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点&＃xff1a;

1、vertical-align:middle的时候&＃xff0c;是该元素的中心对齐周围元素的中心。

2、这里“中心”的定义是&＃xff1a;图片当然就是height的一半的位置&＃xff0c;而文字应该是基于baseline往上移动0.5ex&＃xff0c;亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em&＃xff0c;以至于其实不一定是x的正中心

&＃xff08;baseline等名词如果不懂&＃xff0c;请先阅读wheatlee的文章&＃xff09;

按照这个思路&＃xff0c;对照我遇到的问题&＃xff0c;首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染&＃xff08;是不是把复选框当成一个正方形图片来对待&＃xff09;。于是写出下面的代码&＃xff1a;


测试文字
代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下&＃xff1a;

事实证明&＃xff0c;FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的&＃xff0c;即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候&＃xff0c;是该元素的中心对齐周围元素的 中心”的观点&＃xff0c;如果我在复选框后面输入英文字符&＃xff0c;那么复选框的中心将与英文中小写字母x的中心对齐。经测试&＃xff0c;FF3.5下面基本上是这样的(在一些字号的 时候会有一定的误差&＃xff0c;比如&＃xff0c;如果字体高度是偶数&＃xff0c;那么这个中心点有时在一半偏上1px&＃xff0c;有时在一半偏下1px)。如图&＃xff1a;

但是这对于中文来说&＃xff0c;并不是一个好的结果。因为中文是方块字&＃xff0c;并且相同字号的情况下&＃xff0c;高度会比小写的x高出很多。所以&＃xff0c;按照浏览器内置的方式&＃xff0c;只用 vertical-align:middle是无论如何也无法对齐中文的&＃xff08;无论是只写中文&＃xff0c;中文在前&＃xff0c;英文在前&＃xff0c;FF3.5都是按照小写x中心那种方法来 对齐的。&＃xff09;。但是回头再看看wheatlee的文章&＃xff0c;他说这个小写x中心对齐的渲染方式&＃xff0c;是对于“文字”来说的。那么&＃xff0c;如果不是文字呢…&＃xff1f;如果复选框后面 跟的是一个行内元素&＃xff0c;如label&＃xff0c;而文字是写在它内部的&＃xff0c;会是什么样呢&＃xff1f;浏览器会不会将这个内联元素整体看作一个“块”&＃xff0c;然后依照类似图片的规则进行渲 染呢&＃xff1f;如果那样&＃xff0c;我们就达到目的了。

但是经过测试&＃xff0c;很遗憾&＃xff0c;事实并不是这样&＃xff0c;加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下&＃xff0c;证明浏览器并没有按照label的高度值来去对齐中心点。如图&＃xff1a;

如果按照之前的设想&＃xff0c;红蓝两线应该是重合的。但现在的情况是&＃xff0c;它们相差了1px。并且这1px是没有规律的&＃xff0c;随着字号的放大&＃xff0c;并不恒定&＃xff0c;貌似轻易也无法提炼出对应关系来。于是想到&＃xff0c;再试一下将label也加上vertical-align:middle。结果如图&＃xff1a;

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

经过以上折腾&＃xff0c;我得出了跟wheatlee相同的结论&＃xff0c;就是&＃xff0c;各种浏览器之间对这个问题的处理貌似没有任何规律。并且&＃xff0c;似乎每一种浏览器对于 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.”

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

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









测试文字x

最终效果&＃xff1a;

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

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










测试文字x




测试文字x




文字

文字



测试文字





测试文字

测试文字

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










测试文字x



這是繁體中文



次回から自動的にログイン



English



Чужой компьютер



????? ?? ‏????????



????



?????