javascript - 单选按钮样式在 Internet Explorer 8 中不起作用

Question

我有几个单选按钮。我使用以下 css 来更改带有图像的单选按钮样式。它在 firefox、chrome 甚至 Internet Explorer 9 中都能完美运行，但在 Internet Explorer 8 中却不行。

input[type='radio'] + label {
margin: 0;
clear: none;
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(icons.png) left center no-repeat;
background-position:0px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}

input[type='radio']:checked + label {
background-image: url(icons.png);
background-position:-54px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}

Answer 1

伪类在 IE8中:checked不可用

http://www.quirksmode.org/css/contents.html

http://www.quirksmode.org/css/enabled.html

我只是在 IE8 及更低版本中显示普通单选按钮。这为使用旧技术的人提供了相同的体验，并且不会为您带来数小时/数天的工作负担，只是为了让所有内容在浏览器中看起来都一样。

Answer 2

仅适用于 IE 8 及更高版本。您可以使用

input[type='radio'][checked] + label {
background-image: url(icons.png);
background-position:-54px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}

这将适用于 IE8 及更高版本，但不适用于 IE7 及更低版本..

Answer 3

我尝试了所有的polyfills。除了 ie9.js，它们都不起作用。不幸的是，ie9.js让我的页面加载速度就像一群蜗牛穿过花生酱一样慢。经过近 2(!) 天的诅咒，我终于得到了 IE8 单选按钮，它与一点点 jQuery 和 CSS 一起工作。

第一个问题是向未检查/检查的输入添加和删除一个类。其次是强制 IE8 在选中另一个单选按钮后重新呈现未选中的输入。我认为这种方法也适用于复选框。

jQuery：

// maybe you need this next small line, I didn't
// $('input:checked').addClass("selected");
$('input').change(function () {  // click() worked too but change is safer
  $(this).addClass("selected");
  $('input:not(:checked)').removeClass("selected");
  // adding a class to a wrapping element
  // and then remove it to force IE8 to rerender
  var testClass = "testClass";       
  $(this).parent().parent().addClass(testClass).removeClass(testClass);
});

和CSS：

input[type="radio"] {
  // display: none; won't work
  // so replace the actual button offscreen
  // or cover it with following label
}
input[type="radio"] + label {
  background-color: red;  // or background-image
}
input[type="radio"].selected + label {
  background-color: green;  // or background-image
}
input[type="radio"] + label,
input[type="radio"].selected + label {
  position: relative;
  top: 150px;
  left: 300px;
  height: 48px;
  width: 48px;
  display:inline-block;
  padding: 0;
  text-indent: -9999px;
  cursor: pointer;
}