Question

@Duplicate Flag：问题与旧问题类似，但不一样。对于初学者来说，他的问题在于IE 8并在IE 9,10和11中得到了解决。我的IE 10＆amp; 11。

我在下面有一个准确的概念验证页面，以显示我正在谈论的内容。

基本上，我尝试使用HTML5 data- *属性来增强我的页面的语义含义，并使用css规则来显示样式，而不是使用javaScript显示/隐藏逻辑。

以下代码在Firefox / Chrome中运行良好，但在Internet Explorer 10和11中失败。

我想我可以使用父级中的类来获得类似的行为，但HTML5属性似乎更适合这种情况，并且我无法让它与IE一起工作。

任何见解？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .Container[data-Verbose="Yes"] .NotVerbose
            {
                display: none;
            }
            .Container[data-Verbose="No"] .Verbose
            {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="Container" data-Verbose="Yes">
            <a class="Verbose">Not Verbose Please</a>
            <a class="NotVerbose">Verbose Please</a>
            <p class="Verbose">*Long Paragraph*</p>
            <p class="NotVerbose">*Short Sentence*</p>
        </div>
        <script src="jquery-1.11.1.min.js"></script>
        <script>
            jQuery(document).on('click', '.Container a', function(Event) {
                var Target = jQuery(this);
                console.log(Target);
                if(Target.is('.Verbose'))
                {
                    jQuery('.Container').attr('data-Verbose', 'No');
                }
                else if(Target.is('.NotVerbose'))
                {
                    jQuery('.Container').attr('data-Verbose', 'Yes');
                }
            });
        </script>
    </body>
</html>

Answer 1

我在控制台中使用IE的“文档模式”，上面的示例仅在IE 9中正常运行（但不是其他版本）。还值得一提的是，即使是IE 9也会使用一组更复杂的CSS规则来使用data- *属性，因此将以下内容强行推动IE的行为与IE 9一样可能会在某些情况下起作用，但这不是一个强大的解决方法：

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

正如我之前的其他人所概述的那样，问题是IE在某些情况下不会正确地重新绘制数据 - *，这是IE 8中报告的一个问题，并且似乎仍然存在于更高版本的更多版本中复杂的css规则。

之前概述的解决方案是将样式更改为受影响元素的某个默认值（即不透明度为1）以强制重绘，但似乎IE的更高版本中的优化不会重新将样式属性重置为相同值时绘制，使上述解决方案无法维持，除非您可以找到具有2个不会影响显示的不同值的css属性。

总是强制重新绘制的更可靠的解决方案是在修改了data- *属性的元素上添加和删除任意类。

修复此问题的jQuery.attr setter的一个方便的包装器可以在这里找到：

https://github.com/Magnitus-/IEAttrWorkaround

当数据值改变时，涉及数据的值的CSS规则 - *在祖先不能正常工作的情况下

1 个答案: