一、為什么復選框與后面的文字有間距
1.在FF，chrome，Safari等瀏覽器，是由margin引起的，也就是checkbox有默認margin-right:3px。（FF下復選框默認margin值為3px 3px 3px 4px，chrome與之一致 ）
2.IE6-IE8是由本身引起的。
給復選框加border和background，IE6下如圖，IE7類似，IE8更對稱些，FF下無反應。由此IE瀏覽器下我們看到的復選框只是真實復選框的一部分，真正的復選框是邊框及背景色充斥的整個部分。
由於復選框本身的差異，造成IE及其他瀏覽器復選框對CSS的反應不同。IE瀏覽器下復選框對width、height、border、background等敏感，而margin ：0一點反應都沒有，FF、chrome等瀏覽器border、background無效果，FF對width、height無反應（本身大小不變，但位置會變），但FF對margin ：0反應強烈，會使復選框后面的文字緊貼復選框。
1.產生的條件
14像素左右大小的字體與復選框沒有對齊的問題，而12px，文字位置一般會偏下
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\9;
結果如下圖（以IE6瀏覽器和Firefox瀏覽器示例）：
css代碼如下：height:13px; vertical-align:text-top; margin-top:0;
結果如下圖（以IE7瀏覽器和chrome瀏覽器截圖示例）：
css代碼如下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
結果如下圖（以IE6和Firefox瀏覽器截圖做示例）：
css代碼如下：height:14px; vertical-align:top;
結果如下圖（chrome下文字略微偏上，其他瀏覽器下很完美，以IE7和chrome瀏覽器示例）：
css代碼如下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;
結果如下截圖（以IE6和Firefox示例）：
方案3和方案5從兼容性，代碼的利用率，css的消耗等來講都是我非常推薦的兩種方法。
作者補充於11月3號凌晨2：40，曾在人人網的css代碼中看到使用vertialc-align:-3px解決此問題，我試過，雖然表現不能用完美形容，但確實緩解了對齊的問題，是個性價比非常高的方法。我是建議您試試的。
首先復選框后面的文字字體須是”Tahoma”（可以稱之為“她好嗎”字體方便記憶），然后復選框的樣式是.checkbox{vertical-align:middle; margin-top:0;}
本文轉自 http://shicaolang1990.blog.163.com/blog/static/20391507720125553826487/