複選框單選框與文字對齊問題的研究與解決

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

1、問題產生的條件
對於14像素大小的字體是沒有本篇所要探討的單（復）選框與文字對齊的問題的。（見下圖）

14像素大小文字與單複選框無對齊的問題

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

12像素文字相對於單複選框位置偏下不對齊

這就是本文所要研究與解決的問題。這種不對齊的根本緣由我不清楚，但我能夠確定的是單複選框與文字默認以vertical-align:baseline的方式對齊的。

 

2、解決方案
下面我將提供五種解決方案，有三個方案沒有使用任何hack，且IE6，IE7，Firefox，chrome瀏覽器下表現都很好的，有一種方案使用了一個IE hack，但成本較低，各個瀏覽器表現良好。還有一種方案，代碼成本很低，但在chrome瀏覽器下文字稍微偏上，使用input類型選擇器，或chrome hack能夠解決這個問題，可是對於單複選框這類控件，代碼一多反而不划算，權衡之下，不針對chrome瀏覽器單獨處理。
這些方案都是我通過平時積累，反覆試驗得出的結論，其兼容性值得信賴。要使用的話就給單複選框命名一個class，該class樣式爲下面方案提供的css樣式便可。

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

IE6瀏覽器下的樣式表現

 

Firefox瀏覽器下的樣式表現

 

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

IE7下的樣式表現

 

chrome下的樣式表現

 

3.以vertical-align:bottom爲基礎的
css代碼以下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
結果以下圖（以IE6和Firefox瀏覽器截圖作示例）：

IE6下的表現

 

Firefox下的表現

 

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

IE7下的表現

 

chrome下的表現-文字偏上

 

5.以vertical-align:middle爲基礎的
css代碼以下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;
結果以下截圖（以IE6和Firefox示例）：

IE6下的樣式表現

 

Firefox瀏覽器下的表現

 

最後的說明
*未顯示在opera瀏覽器下測試的結果，緣由一是opera市場份額奇怪的小，即便無論它也影響不大；二是減輕本身的截圖，對比處理的工做量。這裏就直接用文字表述在opera瀏覽器下的表現吧。opera是個怪胎，應該來講，它對標準的支持應該是很好的，可是14像素的文字和單選框複選框倒是不對齊的，固然，12像素更不用說了。可是，在方案3和方案5下的表現倒是意外的好，因此方案3和方案5是不錯的方案。
*IE8瀏覽器下未測試，不是不想測，而是如今手頭上就一臺電腦，IE8因爲系統緣由，測不了，抱歉。
*以上方案不必定是最優的方法，我沒有加入padding進行測試，還有其餘一些屬性，只要有時間，將各種組合一個一個的試驗，可能會找到另外的方法。
*Firefox瀏覽器和chrome瀏覽器下的單選框和複選框默認是由一個margin值的。其二者的值大小近乎一致，拿chrome瀏覽器舉例。在chrome谷歌瀏覽器下，radio單選框的默認margin值是：margin:3px 3px 0 5px;checkbox複選框的margin值爲margin:3px 3px 3px 4px;而IE瀏覽器下彷佛沒有margin值，可是對margin敏感。這是不用hack解決對齊問題的難點之一。
*最後，說句結論性的話，方案3和方案5從兼容性，代碼的利用率，css的消耗等來說都是我很是推薦的兩種方法。建議您試試！

做者補充於11月3號凌晨2：40，曾在人人網的css代碼中看到使用vertialc-align:-3px解決此問題，我試過，雖然表現不能用完美形容，但確實緩解了對齊的問題，是個性價比很是高的方法。我是建議您試試的。

尾聲，獻上本文的終極demo實例頁面，狠狠地點擊這裏吧。

原創文章，轉載請註明來自 張鑫旭-鑫空間-鑫生活 [http://www.zhangxinxu.com]

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