CSS :after fails in IE8, but only after adding a reference to jQuery

Question

It's taken me a few hours to track this issue down and I'm a bit shocked by what I am seeing.

Here's the code:

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

The above example works appropriately in IE8. When viewed, the word 'moo' is appended to the end of targetElement:

在此输入图像描述

Now, lets spice things up a little bit by reference jQuery via the CDN. Add the following line of code:

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

such that the entire example reads as:

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

refresh IE8 and observe that the word moo has been dropped, but the element retains its data-content attribute:

在此输入图像描述

I... I don't understand. I thought jQuery was supposed to be helping me out with cross-browser compatibility... but here it is wrecking shop.

Any ideas on how I can trouble shoot this? Or work around?

Answer 1

Alright! I spoke with Joseph Marikle in chat and we worked through a large amount of examples attempting to track down the issue.

I have good news and I have bad news. The bad news first -- I don't know exactly what the hell is going on. The good news? I've got work arounds!

So, first off, if your element is on the page at design-time (not dynamically generated) then, as long as the element's attribute exists, the css should work.

Eg:

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

This example works because targetElement has the title attribute defined. The title is set to moo at run time and the css reflects this by showing content as 'moo.'

If you remove the code title="hi", you will not see moo. FURTHERMORE, if targetElement is not on the page when the css is ran -- you will not see moo -- even if you generate targetElement with the title attribute existing.

If you want to dynamically generate your elements and have this css still work... I have a second workaround for you and this is the one I am currently using. The issue seems to be that IE8 isn't finding the element when it applies pseudo-selectors and it doesn't re-run its logic when the element shows up.

So, if you do something like..

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

This will modify your stylesheet at runtime and add a new CSS rule. This causes IE8 to re-apply the logic and, because the dynamic elements are on the page now, it finds them and applies the css appropriately. Woohoo! Stupid IE8.

CSS :after fails in IE8, but only after adding a reference to jQuery

Question

1 answers

solution1
1 ACCPTED 2013-06-28 23:53:10

CSS :after fails in IE8, but only after adding a reference to jQuery

Question

1 answers

solution1 1 ACCPTED 2013-06-28 23:53:10

solution1
1 ACCPTED 2013-06-28 23:53:10