在IE8及以下版本中使用选择性的CSS3伪类

时间:2014-03-01 16:39:10

标签: html css html5 css3

如果使用selectivizr检查,我的收音机输入样式有问题。你能帮我解决一下如何让它与selectivizr合作。如果有另一种方法怎么做,请在下面说明。这里是我网站的链接:test_radio_buttons以下是我的CSS和HTML代码?谢谢大家的时间和精力。

HTML:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="lolkittens" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="checked-polyfill.js"></script>
     <script>
        $( document ).ready(function(){
            $('input:radio').checkedPolyfill();
       });
     </script>
    <link href="style.css" rel="stylesheet" />
    <title>Radio</title>

</head>

<body>

<form>
    <input type="radio" id="musi_se_jmenovat_stejne1" name="address" />
    <label for="musi_se_jmenovat_stejne1"></label>
    <input type="radio" id="musi_se_jmenovat_stejne2" name="address" />
    <label for="musi_se_jmenovat_stejne2"></label>
</form>

</body>
</html>

CSS:

input[type="radio"]{
    display:none;
}

input[type="radio"] + label
{
    background: url('radio_un.gif');
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"]:checked + label
{
    background: url('radio_in.gif');
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input[type="radio"].checked + label{
    background: url('radio_in.gif');
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

1 个答案:

答案 0 :(得分:0)

这里的Poly-fill像这样:https://github.com/rdebeasi/checked-polyfill对我有用。 当在标签上触发onchange事件时,它会在IE8中添加一个已检查的类。

我确实记得选择了一个问题,并使这项工作 请参阅此处的小提琴:http://fiddle.jshell.net/5a7Gj/15/
在浏览器堆栈的IE8中测试它并不适用于selectivr。它不会添加任何已检查的类。

input[type="radio"]:checked + label
{
    background: url('radio_in.gif');
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"].checked
{
    background: url('radio_in.gif');
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}