[英]Radio Button Style not working in Internet Explorer 8
I am having few radio buttons. 我有几个单选按钮。 I use the following css for changing the radio button style with an image.
我使用以下CSS更改图像的单选按钮样式。 It works perfectly in firefox, chrome and even Internet Explorer 9 but not in Internet Explorer 8.
它在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
}
the :checked
pseudo 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. 我只是在IE8及更低版本中显示普通的单选按钮。 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.
这为使用旧技术的人们提供了相同的体验,并且不会使您花费数小时/数天的工作,只是使所有浏览器的外观看起来都一样。
Only for IE 8 and above. 仅适用于IE 8及更高版本。 you can use
您可以使用
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及更低版本中则无效。
I tried all polyfills out there. 我尝试了所有的polyfills。 Except ie9.js none of them worked.
除了ie9.js之外,它们都不起作用。 Unfortunately ie9.js made my page load as slow as a herd of snails traveling through peanut butter.
不幸的是, ie9.js使我的页面加载像一群蜗牛穿过花生酱一样缓慢。 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.
经过将近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.
其次是在再次选中另一个单选按钮后强制IE8重新呈现未选中的输入。 I think this approach will work with checkboxes, too.
我认为这种方法也适用于复选框。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.