by zhangxinxu from http://www.
本文地址：http://www./wordpress/?p=56

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

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

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

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

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

二,、解決方案
下面我將提供五種解決方案，有三個方案沒有使用任何hack,，且IE6,，IE7，F(xiàn)irefox,，chrome瀏覽器下表現(xiàn)都很好的,，有一種方案使用了一個IE hack，但成本較低,，各個瀏覽器表現(xiàn)良好,。還有一種方案，代碼成本很低,，但在chrome瀏覽器下文字稍微偏上,，使用input類型選擇器，或chrome hack可以解決這個問題,，但是對于單復(fù)選框這類控件,，代碼一多反而不劃算，權(quán)衡之下,，不針對chrome瀏覽器單獨(dú)處理,。
這些方案都是我經(jīng)過平時積累，反復(fù)試驗(yàn)得出的結(jié)論,，其兼容性值得信賴,。要使用的話就給單復(fù)選框命名一個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瀏覽器示例）：

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

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

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

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

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

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

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

原創(chuàng)文章,，轉(zhuǎn)載請注明來自 張鑫旭-鑫空間-鑫生活 [http://www.]

本文地址：http://www./wordpress/?p=56

10 條評論 發(fā)表在“復(fù)選框單選框與文字對齊問題的研究與解決”上