自定义复选框在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。