{"id":507,"date":"2022-08-30T15:02:30","date_gmt":"2022-08-30T15:02:30","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/css-counters-fail-in-ie9-but-get-fixed-with-ie-devtools-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:02:30","modified_gmt":"2022-08-30T15:02:30","slug":"css-counters-fail-in-ie9-but-get-fixed-with-ie-devtools-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/css-counters-fail-in-ie9-but-get-fixed-with-ie-devtools-collection-of-common-programming-errors\/","title":{"rendered":"CSS counters fail in IE9 but get fixed with IE devtools?-Collection of common programming errors"},"content":{"rendered":"

I have<\/p>\n

    s utilizing css counters, working fine in Chrome: 4) 5) 6)…etc.<\/p>\n

    But in IE9, I get: 0) 0) 0)…just 0)’s.<\/p>\n

    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.<\/p>\n

    Any ideas on ensuring that css counters work in IE9?<\/p>\n

    Thanks! – Michael M.<\/p>\n

    ol.start-f-paren {list-style-type:none;counter-reset:sfp 5;}\nol.start-f-paren > li {counter-increment:sfp;}\nol.start-f-paren > li:before {content:counter(sfp, lower-alpha) \") \";}\n<\/code><\/pre>\n
      \n
    1. \n
      Check if you have console.log()<\/code> somewhere in your JavaScript.<\/p>\n
      Problem is IE9<\/code> when dev tools are closed doesn’t have a console object, so it fails JavaScript execution. This problem is fixed in IE10+<\/code><\/p>\n
      use this instead of regular console.log()<\/code><\/p>\n
      var log = function(msg){\n    if(typeof(console) !== \"undefined\"){\n        console.log(msg);\n    }\n}\n<\/code><\/pre>\n
      Let me know if it works, I had similar problem.<\/p>\n<\/li>\n
    2. \n
      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);<\/p>\n
      as opposed to what I was doing: \/\/breaks in IE counter(myCounter, upper-alpha);<\/p>\n
      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\/<\/p>\n<\/li>\n<\/ol>\n<\/ol>\n
      Originally posted 2013-11-09 20:01:58. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
      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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-507","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/507\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}