文字与单选按钮和复选按钮对齐问题

问题描述

---

最近发现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：应该还可以找出其它的方式，我这里就不一一寻找，毕竟测试还是蛮费时间的，当然欢迎大家补充！