問(wèn)題描述

最近發(fā)現(xiàn)22號(hào)字體以下以及34號(hào)字體以上都不能與單選按鈕和復(fù)選按鈕很好的對(duì)齊，會(huì)出現(xiàn)錯(cuò)位的現(xiàn)象。而且奇怪是很多大型網(wǎng)站也沒(méi)進(jìn)行這方面的處理，個(gè)人感覺這也會(huì)影響部分用戶的體驗(yàn)，比如...處女座，咳咳，開個(gè)玩笑。

下面以慕課網(wǎng)此類現(xiàn)象截圖為例：

IE-14px

Chrome-13px

firefox-13px

解決辦法

• 為按鈕添加vertical-align:10%;（使用 "line-height" 屬性的百分比值來(lái)排列此元素，允許使用負(fù)值）屬性，其中百分比需要根據(jù)字體調(diào)節(jié)，這里展示的是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：應(yīng)該還可以找出其它的方式，我這里就不一一尋找，畢竟測(cè)試還是蠻費(fèi)時(shí)間的，當(dāng)然歡迎大家補(bǔ)充！