复选框单选框与文字对齐问题的研究与解决

摘要：

目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。

 

文章链接：http://www.zhangxinxu.com/wordpress/?p=56

 

为解决这一问题，张鑫旭测试了五种方案，并推荐了其中两种兼容性较好的方案。分别为：

 

1、以vertical-align:bottom为基础的

height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

 

IE6下 的表现：

Firefox下的表现：

 

2、以vertical-align:middle为基础的

vertical-align:middle; margin-top:-2px; margin-bottom:1px;

 

IE6 下的样式表现：

 

Firefox浏览器下的表现：

 

看到这，我突然想到这两个方案对解决图片按钮与周边文字对齐的恼人问题可能也有效，这个倒要抽空测试测试。

 

参看另一篇相关文章：checkbox复选框的一些深入研究与理解