问题描述
最近发现22号字体以下以及34号字体以上都不能与单选按钮和复选按钮很好的对齐，会出现错位的现象。而且奇怪是很多大型网站也没进行这方面的处理，个人感觉这也会影响部分用户的体验，比如...处女座，咳咳，开个玩笑。
下面以慕课网此类现象截图为例：
IE-14px
Chrome-13px
firefox-13px
解决办法
- 为按钮添加
vertical-align:10%;（使用 "line-height" 属性的百分比值来排列此元素，允许使用负值）属性，其中百分比需要根据字体调节，这里展示的是13px字体
firefox-(10%)
chrome-(-20%)
- 为按钮添加
margin-top: 2px;vertical-align: text-top;或则margin-bottom: 2px;vertical-align: text-bottom;
firefox-(2px)
chrome-(0px)
- 以下样式也可以的
fierfox
chrome
Ps：应该还可以找出其它的方式，我这里就不一一寻找，毕竟测试还是蛮费时间的，当然欢迎大家补充！
网友评论