关于IE下复选框的样式问题

一、为什么复选框与后面的文字有间距

1.在FF，chrome，Safari等浏览器，是由margin引起的，也就是checkbox有默认margin-right:3px。（FF下复选框默认margin值为3px 3px 3px 4px，chrome与之一致 ）
2.IE6-IE8是由本身引起的。

 

 FF的虚框直接依附在复选框本身的边框上，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;
css代码如下：vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px9;
结果如下图（以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示例）：

 

 

方案3和方案5从兼容性，代码的利用率，css的消耗等来讲都是我非常推荐的两种方法。
作者补充于11月3号凌晨2：40，曾在人人网的css代码中看到使用vertialc-align:-3px解决此问题，我试过，虽然表现不能用完美形容，但确实缓解了对齐的问题，是个性价比非常高的方法。我是建议您试试的。

  补充方案6.以字体为基础的

首先复选框后面的文字字体须是”Tahoma”（可以称之为“她好吗”字体方便记忆），然后复选框的样式是.checkbox{vertical-align:middle; margin-top:0;}

本文转自   http://shicaolang1990.blog.163.com/blog/static/20391507720125553826487/