本文研究了12px文字在与单选框、复选框对齐方面的问题，并提供了五种兼容性良好的解决方案，包括vertical-align属性的不同设置，以及针对不同浏览器的微调。方案3和方案5被推荐为最优选项，适用于IE6、IE7、Firefox、Chrome等多种浏览器。
原文地址：
http://www.zhangxinxu.com/wordpress/?p=56
这里，不是说，雅虎中国的团队不够认真，而因为这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性，控件本身的特殊性以及代码成本的控制等，使得这个问题不是简单就能解决的。
这不是我第一次研究单选框复选框对齐的问题了，因为平时对这个问题注意的比较多，也经常做些测试，对这个问题还是有一定的了解，也总结了不少自己的解决方法。今天我就写下来，供交流与参考。
但是，对于12像素大小的文字，则就存在对齐问题了，尤其在Firefox火狐浏览器以及chrome谷歌
前言
目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下的截图：
雅虎中国首页单选框复选框与文字不对齐
这里，不是说，雅虎中国的团队不够认真，而因为这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性，控件本身的特殊性以及代码成本的控制等，使得这个问题不是简单就能解决的。
这不是我第一次研究单选框复选框对齐的问题了，因为平时对这个问题注意的比较多，也经常做些测试，对这个问题还是有一定的了解，也总结了不少自己的解决方法。今天我就写下来，供交流与参考。
一、问题产生的条件
对于14像素大小的字体是没有本篇所要探讨的单（复）选框与文字对齐的问题的。（见下图）
14像素大小文字与单复选框无对齐的问题
但是，对于12像素大小的文字，则就存在对齐问题了，尤其在Firefox火狐浏览器以及chrome谷歌
最低0.47元/天 解锁文章
扫一扫
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
