Question

我花了几个小时来追踪这个问题，我对我所看到的东西感到有些震惊。

以下是代码：

<!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>

以上示例在IE8中正常工作。查看时，单词'moo'将附加到targetElement的末尾：

enter image description here

现在，让我们通过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>

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

enter image description here

我...我不明白。我认为jQuery本来应该帮助我解决跨浏览器的兼容问题...但是这里它正在破坏商店。

关于如何解决这个问题的任何想法？或者解决？

Answer 1

好的！我在聊天时与Joseph Marikle交谈过，我们通过大量的例子试图找出问题。

我有好消息，我有坏消息。首先是坏消息 - 我不确切地知道到底发生了什么。好消息？我已经解决了问题！

所以，首先，如果你的元素在设计时在页面上（不是动态生成的）那么，只要元素的属性存在，css就可以工作。

E.g：

<!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>

此示例有效，因为targetElement已定义title属性。标题在运行时设置为moo，而css通过将内容显示为“moo”来反映这一点。＆＃39;

如果您删除代码标题=＆＃34;嗨＆＃34;，您将看不到moo。 FURTHERMORE，如果在运行css时页面上没有targetElement - 你将看不到moo - 即使你生成了title属性，并且标题属性已经存在。

如果你想动态生成你的元素并让这个css仍然有效...我有第二个解决方法，这是我目前正在使用的。问题似乎是IE8在应用伪选择器时没有找到该元素，并且当元素出现时它不会重新运行其逻辑。

所以，如果你做的事情......

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)");

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

CSS：IE8失败后，但只有在添加对jQuery的引用之后

1 个答案: