CSS counters fail in IE9 but get fixed with IE devtools?

Question

I have <ol>s utilizing css counters, working fine in Chrome: 4) 5) 6)...etc.

But in IE9, I get: 0) 0) 0)...just 0)'s.

If I launch IE's devtools and change the browser mode/document mode to something less than IE9/IE9 Standards, then revert back to IE9/IE9 Standards, the css counters appear correctly. This is a fairly reliable fix, but I can't deploy telling users to do this.

Any ideas on ensuring that css counters work in IE9?

Thanks! - Michael M.

ol.start-f-paren {list-style-type:none;counter-reset:sfp 5;}
ol.start-f-paren > li {counter-increment:sfp;}
ol.start-f-paren > li:before {content:counter(sfp, lower-alpha) ") ";}

Answer 1

The fix is to make sure that when you have a counter rule in your css class, don't use spaces around commas, like so: counter(myCounter,upper-alpha);

as opposed to what I was doing: //breaks in IE counter(myCounter, upper-alpha);

When I apply the fix, IE9 seems more reliable viewing in IE9 standards mode. The jury is out if this is 100% reliable, but it's currently working. It's explained well here: http://jes.st/2013/ie7s-css-breaking-content-counter-bug/

Answer 2

Check if you have console.log() somewhere in your JavaScript.

Problem is IE9 when dev tools are closed doesn't have a console object, so it fails JavaScript execution. This problem is fixed in IE10+

use this instead of regular console.log()

var log = function(msg){
    if(typeof(console) !== "undefined"){
        console.log(msg);
    }
}

Let me know if it works, I had similar problem.