做页面的过程中遇到过复选框单选框与文字对齐问题,看到这篇文章写得不错,很详细的解说。
前言
目前中文网站上面的文字,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下的截图:
![雅虎中国首页单选框复选框与文字不对齐 雅虎中国首页单选框复选框与文字不对齐](https://i-blog.csdnimg.cn/blog_migrate/41ba1f2464854d4ec7ffc1bedcf48131.png)
这里,不是说,雅虎中国的团队不够认真,而因为这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性,控件本身的特殊性以及代码成本的控制等,使得这个问题不是简单就能解决的。
一、问题产生的条件
对于14像素大小的字体是没有本篇所要探讨的单(复)选框与文字对齐的问题的。(见下图)
![14像素大小文字与单复选框无对齐的问题 14像素大小文字与单复选框无对齐的问题](https://i-blog.csdnimg.cn/blog_migrate/d3b0b34027a9d3debd046bd4ea0c534e.png)
但是,对于12像素大小的文字,则就存在对齐问题了,尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。(见下图)
![12像素文字相对于单复选框位置偏下不对齐 12像素文字相对于单复选框位置偏下不对齐](https://i-blog.csdnimg.cn/blog_migrate/b356f21ec664c21ffa325bbe37fc0fb3.png)
这就是本文所要研究与解决的问题。这种不对齐的根本原因不清楚,但我可以肯定的是单复选框与文字默认以vertical-align:baseline的方式对齐的。
二、解决方案
下面提供五种解决方案,有三个方案没有使用任何hack,且IE6,IE7,Firefox,chrome浏览器下表现都很好的,有一种方案使用了一个IE hack,但成本较低,各个浏览器表现良好。还有一种方案,代码成本很低,但在chrome浏览器下文字稍微偏上,使用input类型选择器,或chrome hack可以解决这个问题,但是对于单复选框这类控件,代码一多反而不划算,权衡之下,不针对chrome浏览器单独处理。
这些方案都是平时积累,反复试验得出的结论,其兼容性值得信赖。要使用的话就给单复选框命名一个class,该class样式为下面方案提供的css样式即可。
1.以vertical-align:text-bottom为基础的
css代码如下:vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;
css代码如下:vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
结果如下图(以IE6浏览器和Firefox浏览器示例):
![IE6浏览器下的表现 IE6浏览器下的样式表现](https://i-blog.csdnimg.cn/blog_migrate/1269ac042b0447f3378ef05fc1f65899.png)
![Firefox浏览器下的样式表现 Firefox浏览器下的样式表现](https://i-blog.csdnimg.cn/blog_migrate/b4d75d6fe38c99c67f0125277c7f800b.png)
2.以vertical-align:text-top为基础的
css代码如下:height:13px; vertical-align:text-top; margin-top:0;
结果如下图(以IE7浏览器和chrome浏览器截图示例):
![IE7下的样式表现 IE7下的样式表现](https://i-blog.csdnimg.cn/blog_migrate/b641c941e3d7379804b9ce81e2d9e484.png)
![chrome下的样式表现 chrome下的样式表现](https://i-blog.csdnimg.cn/blog_migrate/9e25c0a0cf57f19e65a02641c7660352.png)
3.以vertical-align:bottom为基础的
css代码如下:height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
结果如下图(以IE6和Firefox浏览器截图做示例):
![IE6下的表现 IE6下的表现](https://i-blog.csdnimg.cn/blog_migrate/f4ee69e0808fe63ef69f7204d8f6b3d6.png)
![Firefox浏览器下的表现 Firefox下的表现](https://i-blog.csdnimg.cn/blog_migrate/f4ee69e0808fe63ef69f7204d8f6b3d6.png)
4.以vertical-align:top为基础的
css代码如下:height:14px; vertical-align:top;
结果如下图(chrome下文字略微偏上,其他浏览器下很完美,以IE7和chrome浏览器示例):
![IE7下的表现 IE7下的表现](https://i-blog.csdnimg.cn/blog_migrate/2a81f33c236a94c5fc58ff9cfdf3aff8.png)
![chrome下的表现-文字偏上 chrome下的表现-文字偏上](https://i-blog.csdnimg.cn/blog_migrate/5a4fa26761ea5b03f0d1af17f40e3b76.png)
5.以vertical-align:middle为基础的
css代码如下:vertical-align:middle; margin-top:-2px; margin-bottom:1px;
结果如下截图(以IE6和Firefox示例):
![IE6下的样式表现 IE6下的样式表现](https://i-blog.csdnimg.cn/blog_migrate/1aee21495d7cbe2a5175cc953a2e4923.png)
![Firefox浏览器下的表现 Firefox浏览器下的表现](https://i-blog.csdnimg.cn/blog_migrate/1c339f1810a80baac683a3951ad3f043.png)