女王控的博客

复选框单选框与文字对齐问题

产生的条件

对于14像素大小的字体是没有本篇所要探讨的单(复)选框与文字对齐的问题的。(见下图)

2019 12 31 10 07 51

但是,对于12像素大小的文字,则就存在对齐问题了,尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。(见下图)

2019 12 31 10 08 02

这就是本文所要研究与解决的问题,可以肯定的是单复选框与文字默认以 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

2019 12 31 10 09 36

vertical-align:text-top

css代码如下:height:13px; vertical-align:text-top; margin-top:0;

结果如下图(以IE7浏览器和chrome浏览器截图示例):

2019 12 31 10 10 12

2019 12 31 10 10 16

vertical-align:bottom

css代码如下:height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

结果如下图(以IE6和Firefox浏览器截图做示例):

2019 12 31 10 10 57

2019 12 31 10 11 01

vertical-align:top

css代码如下:height:14px; vertical-align:top; 结果如下图(chrome下文字略微偏上,其他浏览器下很完美,以IE7和chrome浏览器示例):

2019 12 31 10 11 57

2019 12 31 10 12 01

vertical-align:middle

css代码如下:vertical-align:middle; margin-top:-2px; margin-bottom:1px; 结果如下截图(以IE6和Firefox示例):

2019 12 31 10 13 22

2019 12 31 10 13 27

总结

vertical-align:bottom和vertical-align:middle从兼容性,代码的利用率,css的消耗等来讲都是我非常推荐的两种方法

评论

阅读下一篇

RequestAnimationFrame的作用
2019-12-27 10:25:31
0%