checkbox與文字對齊方式（同樣可用於radio單選框）

checkbox 在chrome 和 firefox中 間距是由margin撐開， IE中則是由padding，並且無法設置邊框；

 

主要參考大神的博客，http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%8D%E9%80%89%E6%A1%86%E6%88%96%E5%8D%95%E9%80%89%E6%A1%86%E4%B8%8E%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90%E7%9A%84%E9%97%AE%E9%A2%98%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E4%B8%8E%E4%B8%80/ 

測試了一下效果，最后總結出：

方法從上到下按實現效果的程度排列，例方法一為最優選；

方法一： 對任何大小的字體都有效

    首先復選框后面的文字字體須是”Tahoma”（可以稱之為“她好嗎”字體方便記憶），然后復選框的樣式是.checkbox{vertical-align:middle; margin-top:0;}

    效果： chrome中顯示居中，  IE10/9/8顯示居中， IE11/7稍稍偏上1個像素

<div style="font-size: 16px; font-family: Tahoma;">
<input type="checkbox" style="vertical-align:middle; margin-top:0;" onchange="check()">不記住密碼222
</div>

 

 

方法二：（對12px字體有效,其他字號大小請修改具體數值）

    給input[checkbox]設置 vertical-align：-2px；

    效果：IE/chrome 基本都能正常顯示，可能會稍微偏上1個像素；

 

方法三：（對12px字體有效,其他字號大小請修改具體數值）

     給input[checkbox]設置 vertical-align:middle; margin-top:-2px; margin-bottom:1px;

    效果都還可以；

 

這也是一直會遇到的問題，只是對大神文章的梳理，以上3種方法為最新適用的，畢竟大神的文章是很久以前寫的