前言:
今天碰到的這個(gè)問(wèn)題, 恰好找到一個(gè)很好的博文, 在這里轉(zhuǎn)載過(guò)來(lái) 學(xué)習(xí)下.?
原文地址:復(fù)選框單選框與文字對(duì)齊問(wèn)題的研究與解決.

目前中文網(wǎng)站上面的文字，就我的個(gè)人感覺(jué)而言，絕大多數(shù)網(wǎng)站的主流文字大小為12px，因?yàn)樵谀壳案叻直媛曙@示器屏幕下，11px的漢字，其像素點(diǎn)開(kāi)始不規(guī)整，文字不如12px來(lái)的顯示良好。12px大小的文字就是主流也是底線。然而12px的文字與單選框和復(fù)選框是不對(duì)齊的。例如下面這張雅虎中國(guó)首頁(yè)在火狐瀏覽器下的截圖：

雅虎中國(guó)首頁(yè)單選框復(fù)選框與文字不對(duì)齊

這里，不是說(shuō)，雅虎中國(guó)的團(tuán)隊(duì)不夠認(rèn)真，而因?yàn)檫@12px大小文字與單選框和復(fù)選框?qū)R的問(wèn)題不是好解決的。考慮到兼容性，控件本身的特殊性以及代碼成本的控制等，使得這個(gè)問(wèn)題不是簡(jiǎn)單就能解決的。
這不是我第一次研究單選框復(fù)選框?qū)R的問(wèn)題了，因?yàn)槠綍r(shí)對(duì)這個(gè)問(wèn)題注意的比較多，也經(jīng)常做些測(cè)試，對(duì)這個(gè)問(wèn)題還是有一定的了解，也總結(jié)了不少自己的解決方法。今天我就寫(xiě)下來(lái)，供交流與參考。

?

一、問(wèn)題產(chǎn)生的條件
對(duì)于14像素大小的字體是沒(méi)有本篇所要探討的單（復(fù)）選框與文字對(duì)齊的問(wèn)題的。（見(jiàn)下圖）

14像素大小文字與單復(fù)選框無(wú)對(duì)齊的問(wèn)題

但是，對(duì)于12像素大小的文字，則就存在對(duì)齊問(wèn)題了，尤其在Firefox火狐瀏覽器以及chrome谷歌瀏覽器下。（見(jiàn)下圖）

12像素文字相對(duì)于單復(fù)選框位置偏下不對(duì)齊

這就是本文所要研究與解決的問(wèn)題。這種不對(duì)齊的根本原因我不清楚，但我可以肯定的是單復(fù)選框與文字默認(rèn)以vertical-align:baseline的方式對(duì)齊的。

?

二、解決方案
下面我將提供五種解決方案，有三個(gè)方案沒(méi)有使用任何hack，且IE6，IE7，Firefox，chrome瀏覽器下表現(xiàn)都很好的，有一種方案使用了一個(gè)IE hack，但成本較低，各個(gè)瀏覽器表現(xiàn)良好。還有一種方案，代碼成本很低，但在chrome瀏覽器下文字稍微偏上，使用input類型選擇器，或chrome hack可以解決這個(gè)問(wèn)題，但是對(duì)于單復(fù)選框這類控件，代碼一多反而不劃算，權(quán)衡之下，不針對(duì)chrome瀏覽器單獨(dú)處理。
這些方案都是我經(jīng)過(guò)平時(shí)積累，反復(fù)試驗(yàn)得出的結(jié)論，其兼容性值得信賴。要使用的話就給單復(fù)選框命名一個(gè)class，該class樣式為下面方案提供的css樣式即可。

1.以vertical-align:text-bottom為基礎(chǔ)的
css代碼如下：vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;
css代碼如下：vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
結(jié)果如下圖（以IE6瀏覽器和Firefox瀏覽器示例）：

IE6瀏覽器下的樣式表現(xiàn)

?

Firefox瀏覽器下的樣式表現(xiàn)

?

2.以vertical-align:text-top為基礎(chǔ)的
css代碼如下：height:13px; vertical-align:text-top; margin-top:0;
結(jié)果如下圖（以IE7瀏覽器和chrome瀏覽器截圖示例）：

IE7下的樣式表現(xiàn)

?

chrome下的樣式表現(xiàn)

?

3.以vertical-align:bottom為基礎(chǔ)的
css代碼如下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
結(jié)果如下圖（以IE6和Firefox瀏覽器截圖做示例）：

IE6下的表現(xiàn)

?

Firefox下的表現(xiàn)

?

4.以vertical-align:top為基礎(chǔ)的
css代碼如下：height:14px; vertical-align:top;
結(jié)果如下圖（chrome下文字略微偏上，其他瀏覽器下很完美，以IE7和chrome瀏覽器示例）：

IE7下的表現(xiàn)

?

chrome下的表現(xiàn)-文字偏上

?

5.以vertical-align:middle為基礎(chǔ)的
css代碼如下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;
結(jié)果如下截圖（以IE6和Firefox示例）：

IE6下的樣式表現(xiàn)

?

Firefox瀏覽器下的表現(xiàn)

?

最后的說(shuō)明
*未顯示在opera瀏覽器下測(cè)試的結(jié)果，原因一是opera市場(chǎng)份額奇怪的小，即使不管它也影響不大；二是減輕自己的截圖，對(duì)比處理的工作量。這里就直接用文字表述在opera瀏覽器下的表現(xiàn)吧。opera是個(gè)怪胎，應(yīng)該來(lái)說(shuō)，它對(duì)標(biāo)準(zhǔn)的支持應(yīng)該是很好的，但是14像素的文字和單選框復(fù)選框卻是不對(duì)齊的，當(dāng)然，12像素更不用說(shuō)了。但是，在方案3和方案5下的表現(xiàn)卻是意外的好，所以方案3和方案5是不錯(cuò)的方案。
*IE8瀏覽器下未測(cè)試，不是不想測(cè)，而是現(xiàn)在手頭上就一臺(tái)電腦，IE8由于系統(tǒng)原因，測(cè)不了，抱歉。
*以上方案不一定是最優(yōu)的方法，我沒(méi)有加入padding進(jìn)行測(cè)試，還有其他一些屬性，只要有時(shí)間，將各類組合一個(gè)一個(gè)的試驗(yàn)，可能會(huì)找到另外的方法。
*Firefox瀏覽器和chrome瀏覽器下的單選框和復(fù)選框默認(rèn)是由一個(gè)margin值的。其兩者的值大小近乎一致，拿chrome瀏覽器舉例。在chrome谷歌瀏覽器下，radio單選框的默認(rèn)margin值是：margin:3px 3px 0 5px;checkbox復(fù)選框的margin值為margin:3px 3px 3px 4px;而IE瀏覽器下似乎沒(méi)有margin值，但是對(duì)margin敏感。這是不用hack解決對(duì)齊問(wèn)題的難點(diǎn)之一。
*最后，說(shuō)句結(jié)論性的話，方案3和方案5從兼容性，代碼的利用率，css的消耗等來(lái)講都是我非常推薦的兩種方法。建議您試試！

作者補(bǔ)充于11月3號(hào)凌晨2：40，曾在人人網(wǎng)的css代碼中看到使用vertialc-align:-3px解決此問(wèn)題，我試過(guò)，雖然表現(xiàn)不能用完美形容，但確實(shí)緩解了對(duì)齊的問(wèn)題，是個(gè)性價(jià)比非常高的方法。我是建議您試試的。

尾聲，獻(xiàn)上本文的終極demo實(shí)例頁(yè)面，狠狠地點(diǎn)擊這里吧。

總結(jié)

以上是生活随笔為你收集整理的[CSS]复选框单选框与文字对齐问题的研究与解决.的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。