Question

我尝试将样式应用于带有CHECKED属性的单选按钮的标签，但我尝试过的所有内容都无法在IE7上匹配。

示例（JSFiddle）：

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <style type="text/css">
            /* Ensure that + selectors work */
            input + span { color: blue; }

            /* Try [checked] alone */
            input[checked] + span { color: red; }

            /* Try selecting by value */
            input[checked="checked"] + span { color: green; }
        </style>
    </head>
    <body>
        <form>
            <input type="radio" checked="checked" name="x" /><span>One</span>
            <input type="radio" name="x" /><span>Two</span>
            <input type="radio" name="x" /><span>Three</span>
        </form>
    </body>
</html>

所有SPAN＆＃39;文本是蓝色的，但第一个在IE7中既不是红色也不是绿色（在IE11中都是原生的和模拟的）。我是否需要JS hack-arounds，或者是否有一些技巧可以用来实现这个工作？

Answer 1

这很奇怪。 IE7支持属性选择器（至少是基本选择器）。它必须是checked属性特有的。如果将checked属性更改为ANY其他属性名称（有效或无效），则选择器可以工作。只需尝试删除＆＃39; ed＆＃39;使其“检查”存在和等式选择器都有效。不确定这是否与IE7在解析文档时没有设置defaultChecked DOM（非HTML）属性有关。

Internet Explorer 8及更高版本。在IE8模式下，解析操作就可以了选中的内容属性始终影响已检查的内容 attribute和defaultChecked DOM属性。例如， removeAttribute（＆＃39; checked＆＃39;）将checked和defaultChecked设置为假。同样，setAttribute（＆＃39; checked＆＃39;，＆＃39; checked＆＃39;）设置两个DOM 属性为true（就像正在重新解析元素一样）。

来自：https://msdn.microsoft.com/en-us/library/ie/ms533715(v=vs.85).aspx

如果你有很大的需求（很多元素），你可以试试Selectivizr - 有条件地加载IE6-IE8（Selectivizr支持）：

<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="libs/selectivizr.js"></script>
<![endif]-->

如果您只有一个或两个位置，则可以使用jQuery（或纯JavaScript）事件处理程序。这不是我通常写的方式，但我通常的方法不适用于IE7;这是在IE7中工作的唯一：

$('input[name="x"]').on('change', function(){
    $('input[name="x"]').siblings('span').removeClass('red');
    $(this).next('span').addClass('red');
});

CSS：

.red{
    color:red;
}

input [checked]无线电输入上的CSS选择器在IE7中不匹配

1 个答案: