在ie7和ie8中重复的自定义复选框

Question

我正在构建的表单的自定义复选框似乎在IE7中重复出现。 我正在使用http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/中的 “ custom-form-elements.js”

除复选框似乎在IE7和IE8中重复之外，它工作正常。 我已经按照此处所述添加了javascript文件。 附件是我的复选框图像文件

在javascript文件中，我更改了宽度/高度，如下所示

var checkboxHeight = "24";

并在我的CSS如下

.checkbox {
    width: 25px;
    height: 24px;
    padding: 0 5px 0 0;
    background: url(../images/checkbox.png) no-repeat;
    display: block;
    clear: left;
    float: left;
    margin-left: 90px;
    margin-right: 20px;
}

Answer 1

问题似乎是bootstrap.min.css中的CSS覆盖了CSS来填充元素。 Bootstrap.min.css有一条规则：

 .form-horizontal .checkbox {
     padding-top: 7px;
     ...
 }

这会覆盖您的填充规则，因此实际上该元素的顶部填充为7px。 这会增加IE7上元素的高度，您会看到背景图像向下延伸。

解决方法可能是使您的CSS规则更具体，例如.form-horizontal .ticks .checkbox {...}或为填充添加!important 。