产生的条件
对于 14 像素大小的字体是没有本篇所要探讨的单(复)选框与文字对齐的问题的。(见下图)
![2019 12 31 10 07 51](/static/2019-12-31-10-07-51-438de0850c22c422574e079d51e7a132-cf31b.png)
但是,对于 12 像素大小的文字,则就存在对齐问题了,尤其在 Firefox 火狐浏览器以及 chrome 谷歌浏览器下。(见下图)
![2019 12 31 10 08 02](/static/2019-12-31-10-08-02-52f6c7e647beb6264c3fb4888650801b-9cb4a.png)
这就是本文所要研究与解决的问题,可以肯定的是单复选框与文字默认以 vertical-align:baseline 的方式对齐的。
解决方案
vertical-align: text-bottom
css 代码如下:vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
结果如下图(以 IE6 浏览器和 Firefox 浏览器示例):
![2019 12 31 10 09 31](/static/2019-12-31-10-09-31-cef0f5e3e9b4f4a232081ea64a4d50ce-352a0.png)
![2019 12 31 10 09 36](/static/2019-12-31-10-09-36-09e3e618c92448d3831c439df60e2f04-352a0.png)
vertical-align:text-top
css 代码如下:height:13px; vertical-align:text-top; margin-top:0;
结果如下图(以 IE7 浏览器和 chrome 浏览器截图示例):
![2019 12 31 10 10 12](/static/2019-12-31-10-10-12-19eae97e4a8dc85bc74ae04ae82ccb52-352a0.png)
![2019 12 31 10 10 16](/static/2019-12-31-10-10-16-a5b139351df5d75839225aaf6911ac21-352a0.png)
vertical-align:bottom
css 代码如下:height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
结果如下图(以 IE6 和 Firefox 浏览器截图做示例):
![2019 12 31 10 10 57](/static/2019-12-31-10-10-57-2d25c8c0ceaa7be28c3998cca3b73518-352a0.png)
![2019 12 31 10 11 01](/static/2019-12-31-10-11-01-2d25c8c0ceaa7be28c3998cca3b73518-352a0.png)
vertical-align:top
css 代码如下:height:14px; vertical-align:top; 结果如下图(chrome 下文字略微偏上,其他浏览器下很完美,以 IE7 和 chrome 浏览器示例):
![2019 12 31 10 11 57](/static/2019-12-31-10-11-57-7bef99c295797fa56e135b483883f76b-352a0.png)
![2019 12 31 10 12 01](/static/2019-12-31-10-12-01-f9c768a198e5707b773b86dfbac700c7-352a0.png)
vertical-align:middle
css 代码如下:vertical-align:middle; margin-top:-2px; margin-bottom:1px; 结果如下截图(以 IE6 和 Firefox 示例):
![2019 12 31 10 13 22](/static/2019-12-31-10-13-22-b7dea6495ca62e6c8116de37aa7b9ff8-352a0.png)
![2019 12 31 10 13 27](/static/2019-12-31-10-13-27-a37c5ff9fc983985daf6507578ab2e53-352a0.png)
总结
vertical-align:bottom 和 vertical-align:middle 从兼容性,代码的利用率,css 的消耗等来讲都是我非常推荐的两种方法