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.

    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) ") ";}
    
    1. 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.

    2. 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/

Originally posted 2013-11-09 20:01:58.