前言
目前中文**上面的文字，就我的個人感覺而言，絕大多數**的主流文字大小為12px，因為在目前高解析度顯示器螢幕下，11px的漢字，其畫素點開始不規整，文字不如12px來的顯示良好。12px大小的文字就是主流也是底線。然而12px的文字與單選框和核取方塊是不對齊的。例如下面這張雅虎中國首頁在火狐瀏覽器下的截圖：
這裡，不是說，雅虎中國的團隊不夠認真，而因為這12px大小文字與單選框和核取方塊對齊的問題不是好解決的。考慮到相容性，控制項本身的特殊性以及**成本的控制等，使得這個問題不是簡單就能解決的。
這不是我第一次研究單選框核取方塊對齊的問題了，因為平時對這個問題注意的比較多，也經常做些測試，對這個問題還是有一定的了解，也總結了不少自己的解決方法。今天我就寫下來，供交流與參考。
一、問題產生的條件
對於14畫素大小的字型是沒有本篇所要**的單（復）選框與文字對齊的問題的。（見下圖）
但是，對於12畫素大小的文字，則就存在對齊問題了，尤其在firefox火狐瀏覽器以及chrome谷歌瀏覽器下。（見下圖）
這就是本文所要研究與解決的問題。這種不對齊的根本原因我不清楚，但我可以肯定的是單核取方塊與文字預設以vertical-align:baseline的方式對齊的。
二、解決方案
下面我將提供五種解決方案，有三個方案沒有使用任何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瀏覽器示例）：
2.以vertical-align:text-top為基礎的
css**如下：height:13px; vertical-align:text-top; margin-top:0;
結果如下圖（以ie7瀏覽器和chrome瀏覽器截圖示例）：
3.以vertical-align:bottom為基礎的
css**如下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
結果如下圖（以ie6和firefox瀏覽器截圖做示例）：
4.以vertical-align:top為基礎的
css**如下：height:14px; vertical-align:top;
結果如下圖（chrome下文字略微偏上，其他瀏覽器下很完美，以ie7和chrome瀏覽器示例）：
5.以vertical-align:middle為基礎的
css**如下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;
結果如下截圖（以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的消耗等來講都是我非常推薦的兩種方法。建議您試試！
核取方塊或單選框與文字對齊的問題
單選框 核取方塊 當文字14px左右大小時，對齊良好 單選框 核取方塊 當文字12px左右大小時，文字的位置就偏下了，火狐瀏覽器和谷歌瀏覽器下尤為明顯 單選框 核取方塊 當文字12px左右大小時，單 復 選框設定vertical align text bottom margin bottom 2px...
單選框核取方塊取值
query radio取值,checkbox取值,select取值,radio選中,checkbox選中,select選中,及其相關設定 獲取一組radio被選中項的值 var item input name items checked val 獲取select被選中項的文字 var item se...
單選框和核取方塊的應用
在用表單設計調查表時，為了減少使用者的操作，使用選擇框是乙個好主意，在html的標記中有兩種選擇框，即單選框和核取方塊，兩者的區別是單選框中的選項使用者只能選擇一項，而核取方塊中的選項使用者可以任意選擇多項，甚至全選。請看下面的例子 下面給出這個例子的源 結合 來講各引數的設定 form name ...