javascript - CSS 自定义单选按钮在 IE 8 中不起作用

Question

我使用以下代码生成自定义单选按钮。

HTML

<div class="mealPlanContainer remove-padding">
    <input id="mp_${mp.hotelMealPlanId}" name="mealPlan" type="radio" value="${mp.hotelMealPlanId}" class="css-checkbox">
    <label for="mp_${mp.hotelMealPlanId}" class="css-label">${mp.mealPlanDescription}</label>
</div>

CSS

.advance-search-row input[type=radio]{
    margin-top: -4px;
    margin-right: 12px;
    display: none;
}
.advance-search-row span{
    font-size: 15px;
    font-family: 'sagoe-ui-light';
    color: #FFF;
}
.advance-search-row input[type=radio].css-checkbox {
    display:none;
}
.advance-search-row input[type=radio].css-checkbox + label.css-label {
    padding-left:24px;
    height:19px; 
    display:inline-block;
    line-height:19px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:14px;
    vertical-align:middle;
    cursor:pointer;
}
.advance-search-row input[type=radio].css-checkbox:checked + label.css-label {
    background-position: 0 -19px;
}
.advance-search-row label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_353a617ca21d6630433b397442362d96.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

这在 IE 9 以上的版本中运行良好，但在 IE 8 中则不然。我认为问题出在用于更改背景位置的选择器中。关于如何使其在 IE 8 中工作的任何想法。

Answer 1

我第一眼看到的最明显的是:checked . IE8 不支持此选择器。

如果你的 CSS 在没有 :checked 选择器的情况下无法工作，那么它也无法在 IE8 中工作。

我能提供的最佳解决方案是使用类似 Selectivizr 的 polyfill 脚本向旧的 IE 版本添加对此选择器的支持。