Javascript CSS:after在IE8中失败，但仅在添加对jQuery的引用之后_Javascript_Jquery_Html_Internet Explorer 8

Javascript CSS:after在IE8中失败，但仅在添加对jQuery的引用之后

javascript jquery html internet-explorer-8

Javascript CSS:after在IE8中失败，但仅在添加对jQuery的引用之后,javascript,jquery,html,internet-explorer-8,Javascript,Jquery,Html,Internet Explorer 8,我花了几个小时追踪这个问题，我对我所看到的有点震惊代码如下： <!DOCTYPE html> <html> <head> <title>Example</title> <style> a:after { content: attr(data-content); } </style&g

我花了几个小时追踪这个问题，我对我所看到的有点震惊

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style>
            a:after {
                content: attr(data-content);
            }
        </style>

    </head>

    <body>
        <a id="targetElement" href="http://www.google.com">Hello World</a>
    </body>

    <script type="text/javascript">
        document.getElementById("targetElement").setAttribute("data-content", "moo");
    </script>
</html>


例子
a:以后{
内容：attr（数据内容）；
}
document.getElementById（“targetElement”）.setAttribute（“数据内容”、“moo”）；

上述示例在IE8中正常工作。查看时，“moo”一词会附加到targetElement的末尾：

现在，让我们通过CDN引用jQuery来增加一些趣味性。添加以下代码行：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.js"></script>

整个示例如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style>
            a:after {
                content: attr(data-content);
            }
        </style>

    </head>

    <body>
        <a id="targetElement" href="http://www.google.com">Hello World</a>
    </body>

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        document.getElementById("targetElement").setAttribute("data-content", "moo");
    </script>
</html>


例子
a:以后{
内容：attr（数据内容）；
}
document.getElementById（“targetElement”）.setAttribute（“数据内容”、“moo”）；

刷新IE8并观察单词moo已被删除，但元素保留其数据内容属性：

我。。。我不明白。我以为jQuery应该在跨浏览器兼容性方面帮助我。。。但在这里它是破坏商店

有没有办法解决这个问题？还是四处工作？

好吧！我在聊天中与Joseph Marikle进行了交谈，我们通过大量的例子试图追踪这个问题

我有好消息，也有坏消息。首先是坏消息，我不知道到底发生了什么。好消息是什么？我有工作要做

因此，首先，如果您的元素在设计时在页面上（不是动态生成的），那么只要元素的属性存在，css就应该工作

例如：

这将在运行时修改样式表并添加新的CSS规则。这会导致IE8重新应用逻辑，因为动态元素现在在页面上，它会找到它们并适当地应用css。呜呼！愚蠢的IE8。

是IE8吗？它看起来像IE9。如果你看屏幕截图，你可以看到我已经将浏览器和文档模式设置为IE8和IE8标准。哦，我现在明白了。你试过真正的IE8吗？after和pseudo选择器有很多问题，可能没有被“正确地”模拟……您尝试过另一个版本的jQuery吗？我将下载它并仔细检查以安抚一下，但我在过去使用IE的内置模拟时没有遇到任何问题。如果他们的开发工具没有正确地模拟他们的旧浏览器，那么这似乎就违背了这一点。我过几天就回来汇报。@SeanAnderson你知道我们在谈论微软，对吗？还有，js控制台有什么消息吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style>
            a:after {
                content: attr(title);
            }
        </style>
    </head>

    <body>
        <a id="targetElement" title="hi" href="http://www.google.com">Hello World</a>


        <script type="text/javascript">
            document.getElementById("targetElement").setAttribute("title", " moo");
        </script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
    </body>
</html>

node.children('a').attr('data-content', '[' + usedRackUnits + '/' + rackTooltipInfo.rackModel.rows + ']');

var addRule = function (sheet, selector, styles) {
    if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
    if (sheet.addRule) return sheet.addRule(selector, styles);
};

addRule(document.styleSheets[0], 'li[rel="rack"] > a:after', "content: attr(data-content)");