用于复选框的 CSS 在 IE 中不起作用答案

【问题标题】：CSS for checkbox not working in IE用于复选框的 CSS 在 IE 中不起作用
【发布时间】：2014-03-17 00:48:51
【问题描述】：

wordpress 网站中的这段代码：

<div class="form_row checkbox_list">
    <input type="checkbox" name="HotelTypeIDs[]2" id="hotel-type-hotel2" value="0" <?php echo (in_array(1, $hoteltypeids) ? 'checked="checked"' : ''); ?>>huh</input>
    <input type="checkbox" name="HotelTypeIDs[]" id="hotel-type-hotel" value="1" <?php echo (in_array(1, $hoteltypeids) ? 'checked="checked"' : ''); ?>/>

    <label for="hotel-type-hotel">Hotels</label>
    <br />
    <input type="checkbox" name="HotelTypeIDs[]" id="hotel-type-condoresort" value="2" <?php echo (in_array(2, $hoteltypeids) ? 'checked="checked"' : ''); ?>/>
    <label for="hotel-type-condoresort">Condos/Resorts</label>
</div>

正在创建这样样式的复选框：

/* Checkbox */ 

#form_search form .checkbox_list {
    margin-bottom: 30px;
}
#form_search form .checkbox_list input {
    clear:left;
    border:none;
    margin: 0;
    padding:0;
    width:18px;
    height:17px;
    float:none;
    display:inline-block;
}
#form_search form .checkbox_list label {
    background:none;
    font: 400 1.15em Arial, Helvetica, sans-serif;
    color:#000;
    float:none;
    margin: 0px 0px 0 5px;
    padding:5px 0;
    display:inline-block;
    text-transform: capitalize;
}
div.checker, div.checker span {
    background: url(images/sprite.png) no-repeat;
    -webkit-font-smoothing: antialiased;
    margin-top: -6px;
}
div.checker span {
    background-position:0px -194px;
}
div.checker:active span, div.checker.active span {
    background-position:-19px -194px
}
div.checker.focus span, div.checker:hover span {
    background-position:-38px -194px
}
div.checker.focus:active span, div.checker:active:hover span, div.checker.active:hover span, div.checker.focus.active span {
    background-position:-57px -194px
}
div.checker span.checked {
    background-position:-76px -194px
}
div.checker:active span.checked, div.checker.active span.checked {
    background-position:-95px -194px
}
div.checker.focus span.checked, div.checker:hover span.checked {
    background-position:-114px -194px
}
div.checker.focus:active span.checked, div.checker:hover:active span.checked, div.checker.active:hover span.checked, div.checker.active.focus span.checked {
    background-position:-133px -194px
}
div.checker.disabled span, div.checker.disabled:active span, div.checker.disabled.active span {
    background-position:-152px -194px
}
div.checker.disabled span.checked, div.checker.disabled:active span.checked, div.checker.disabled.active span.checked {
    background-position:-171px -194px
}

除非您点击离开它们，否则不会检查复选框。

如果这能解决这个问题，我想简单地使用标准复选框。

您可以在 ohpark.sportsrez.com 上查看此内容。

【问题讨论】：

请格式化您的代码。您在哪个版本的 IE 中测试？
我正在尝试格式化让我发疯的代码
删除的代码我会尝试再次添加 css，css 是导致问题的原因
好的，它现在已经修复了 - 你测试的是哪个版本的 IE？您的代码目前在哪些浏览器中运行？
谢谢你，即11 windows 8，它在chrome中工作

标签： css internet-explorer checkbox

【解决方案1】：

这里的代码： div.checker.focus：活动跨度，div.checker：活动：悬停跨度，div.checker.active：悬停跨度，div.checker.focus.active跨度{ 背景位置：-57px -194px

仅被 IE 读取，并没有将精灵移动得足够远。

将 -57 更改为 -76 就可以了。

【讨论】：