Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 单选按钮样式在Internet Explorer 8中不起作用_Javascript_Css_Internet Explorer 8_Radio Button - Fatal编程技术网

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

Javascript 单选按钮样式在Internet Explorer 8中不起作用,javascript,css,internet-explorer-8,radio-button,Javascript,Css,Internet Explorer 8,Radio Button,我几乎没有单选按钮。我使用以下css更改带有图像的单选按钮样式。它在firefox、chrome甚至InternetExplorer9中都能完美工作,但在InternetExplorer8中却不行 input[type='radio'] + label { margin: 0; clear: none; padding: 5px 0 4px 24px; /* Make look clickable because they are */ cursor: pointer; background:

我几乎没有单选按钮。我使用以下css更改带有图像的单选按钮样式。它在firefox、chrome甚至InternetExplorer9中都能完美工作,但在InternetExplorer8中却不行

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
}

:checked
伪类在IE8中不可用


我只是在IE8和更低版本中显示普通的单选按钮。这为使用旧技术的人提供了相同的体验,并且不会让你为了在不同浏览器中保持一致而花费数小时/数天的工作。

仅适用于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及以下版本

我尝试了所有的填充。除了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;
}
-在这里,它在JSFIDLE中可用