IE8 does not apply the style even when its Developer Tools shows it

StackOverflow https://stackoverflow.com/questions/21470482

Question

I wonder if anyone has encountered this and what they did to fix it. IE, is not applying a style for a class I added at runtime (jQuery). The weird thing is that the Developer Tools is showing it should be applied. See picture below.

The "fa-bars" element has a parent with "blue" class. In this case, I added the "blue" class within $(document).ready(). If I add the "blue" class on the HTML markup (instead of doing it at run-time), it applies the style correctly. But that is not what I want to do.

I only have this problem on IE (I use IE8), but Chrome and FF both render the page as I expect (correctly). Any ideas on how to solve this?

It appears to be a problem only when rendering pseudo content (eg, FontAwesome). If I replace the element with plain text, it works.

enter image description here

ADDED:

Here's my full HTML with links to CDNs for FontAwesome and jQuery:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width" />
        <title>Test</title>
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.nav-toc').addClass('blue');
            });
        </script>
        <style type="text/css">
            .fa {font-size: 1.5em;}
            .nav-toc {color: red;}
            .blue {color: blue;}
        </style>
    </head>

    <body class="pson-green">
        <div id="master-body">
            <!-- Top banner (Menu) -->
            <div id="master-header">
                <div class="content-wrapper">
                    <div id="nav-grp-toc" class="nav-container">
                        <div class="nav-btn nav-toc" title="Contents Menu"><i class="fa fa-bars"></i></div>
                    </div><div id="nav-grp-help" class="nav-container">
                        <div class="nav-btn nav-help" title="Help"><i class="fa fa-question"></i></div>
                    </div><div id="nav-grp-counters" class="nav-container">
                        <div id="page-counter" class="nav-page counter-panel">
                            <div id="current-page" class="current-count" title="Current page number"></div>
                            <div id="total-pages" class="max-count" title="Total number of pages"></div>
                        </div>
                        <div id="question-counter" class="nav-quiz counter-panel">
                            <div id="current-question" class="current-count" class="Current question number"></div>
                            <div id="total-questions" class="max-count" title="Total number of questions"></div>
                        </div>
                    </div><div id="nav-grp-steppers" class="nav-container">
                        <div class="nav-btn nav-page nav-prev" title="Back"><i class="fa fa-chevron-left"></i></div>
                        <div class="nav-btn nav-page nav-next" title="Next"><i class="fa fa-chevron-right"></i></div>
                    </div><div id="nav-grp-exit" class="nav-container">
                        <div class="nav-btn nav-page nav-exit" title="Exit Course"><i class="fa fa-sign-out"></i></div>
                    </div>
                </div>
                <div id="dimmer-for-header" class="dimmer"></div>
            </div>
        </div>
    </body>   
</html>
Was it helpful?

Solution

I think I may have found an answer. It appears from my searches for similar posts, the problem is with IE's handling of pseudo elements. Unfortunately, I number of answers/suggestions on these posts don't appear to work in my case, except for this SO item. Basically, it suggests forcing IE to redraw the pseudo element by temporarily adding to the DOM a style tag which removes all pseudo content, and then removing that style tag immediately afterwards. It seems to work, when combined with a check for IE8 based on this SO item. I added this to my script:

var ie = (function () {
    var undef,
    v = 3,
    div = document.createElement('div'),
    all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                        all[0]
                        );
   return v > 4 ? v : undef;
 } ());

 function redrawPseudos() {
    var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');
    style.type = 'text/css';
    style.styleSheet.cssText = ':before,:after{content:none !important;}';
    head.appendChild(style);
    setTimeout(function () {
        head.removeChild(style);
    }, 0);
 }

So when I have to add/remove a class, which I expect to impact the styling of a pseudo element, I have to do this:

 $('.class1').addClass('newclass');   
 if (ie === 8) {
    redrawPseudos();
 }

It is probably an expensive way of doing it. But I only have less than a dozen of pseudo elements.

ADDED:

You can improve this by passing a selector to redrawPseudos() and including it to the style. This will limit the redraw to the elements identified by your selector.

function redrawPseudos(sel) {
    ...
    style.styleSheet.cssText = sel + ':before, ' + sel + ':after, ' + sel + ' *:before, ' + sel + ' *:after ' + '{content:none !important;}';
    ...
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top