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

时间:2014-03-14 21:59:31

标签: css internet-explorer checkbox

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看到这个。

1 个答案:

答案 0 :(得分:0)

这里的代码:     div.checker.focus:active span,div.checker:active:hover span,div.checker.active:hover span,div.checker.focus.active span {     background-position:-57px -194px

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

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