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种方法为最新适用的，毕竟大神的文章是很久以前写的