0

我正在构建的表单的自定义复选框似乎在 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;
}
4

1 回答 1

1

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

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

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

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

于 2013-09-18T07:12:01.120 回答