单选按钮样式在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

的:checked伪类是无法在IE8

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; 
}