javascript 单选按钮样式在 Internet Explorer 8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14027329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio Button Style not working in Internet Explorer 8
提问by Santron Manibharathi
I am having few radio buttons. I use the following css for changing the radio button style with an image. It works perfectly in firefox, chrome and even Internet Explorer 9 but not in Internet Explorer 8.
我的单选按钮很少。我使用以下 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
}
回答by Benjamin Udink ten Cate
the :checkedpseudo class is not available in IE8
该:checked伪类不可用IE8
http://www.quirksmode.org/css/contents.html
http://www.quirksmode.org/css/contents.html
http://www.quirksmode.org/css/enabled.html
http://www.quirksmode.org/css/enabled.html
I just show normal radio buttons in IE8 and lower. This gives people with old technology the same experience and doesn't burden you with hours/days of work just to have everything look the same across browsers.
我只是在 IE8 及更低版本中显示普通单选按钮。这为使用旧技术的人提供了相同的体验，并且不会给您带来数小时/数天的工作负担，只是为了让浏览器中的所有内容看起来都相同。
回答by Gautam
Only for IE 8 and above. you can use
仅适用于 IE 8 及更高版本。您可以使用
input[type='radio'][checked] + label {
background-image: url(icons.png);
background-position:-54px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}
This will work in IE8 and above but not in IE7 and below..
这将适用于 IE8 及更高版本，但不适用于 IE7 及更低版本。
回答by leymannx
I tried all polyfills out there. Except ie9.js none of them worked. Unfortunately ie9.jsmade my page load as slow as a herd of snails traveling through peanut butter. After nearly 2(!) complete days of cursing I finally got that piece of IE8 radio button working with a little bit of jQuery and CSS.
我尝试了所有的 polyfill。除了 ie9.js 他们都没有工作。不幸的是，ie9.js使我的页面加载速度跟一群蜗牛穿过花生酱一样慢。经过近 2(!) 天的诅咒，我终于让 IE8 单选按钮与一点点 jQuery 和 CSS 一起工作。
First problem was to add and remove a class to the un-/checked input. Second was to force IE8 to rerender the unchecked input once another radio button was checked instead. I think this approach will work with checkboxes, too.
第一个问题是在 un-/checked 输入中添加和删除一个类。其次是一旦另一个单选按钮被选中，就强制 IE8 重新呈现未选中的输入。我认为这种方法也适用于复选框。
jQuery:
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);
});
And the CSS:
和 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;
}
