CSS counters fail in IE9 but get fixed with IE devtools?-Collection of common programming errors
I have
- s utilizing css counters, working fine in Chrome: 4) 5) 6)…etc.
-
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 inIE10+
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.
-
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/
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) ") ";}
Originally posted 2013-11-09 20:01:58.