internet explorer语言 - 复选框的CSS在IE中不工作

Question

这段代码在一个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上看到这个

Answer 1

下面的代码:div.checker。焦点:活动跨度，div.checker:活动:悬停跨度，div.checker。Active:hover span,div.checker.focus.active span {背景位置:-57 px -194 px

只被IE读取，并且没有将精灵移动到足够远的地方。

把-57改成-76就成功了。