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