4

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

这是代码：

<!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 的末尾：

在此处输入图像描述

现在，让我们通过 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 这个词已被删除，但该元素保留了它的 data-content 属性：

在此处输入图像描述

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

关于如何解决这个问题的任何想法？还是解决问题？

4

1 回答 1

1

好吧！我在聊天中与 Joseph Marikle 进行了交谈，我们通过大量示例尝试找出问题所在。

我有好消息，也有坏消息。首先是坏消息——我不知道到底发生了什么。好消息？我有解决办法！

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

例如：

<!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”来反映这一点。

如果您删除代码 title="hi"，您将看不到 moo。此外，如果在运行 css 时 targetElement 不在页面上 - 您将看不到 moo - 即使您生成具有 title 属性的 targetElement 也是如此。

如果你想动态生成你的元素并让这个 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。

于 2013-06-28T23:53:10.937 回答