Search code examples
htmlcssinternet-explorerinternet-explorer-9

Unexpected weird CSS behavior in IE9


I've developed the CSS for a site using SASS/SCSS, Compass, Bootstrap and Font-awesome. I'm now testing it in Chrome, Firefox, IE11 and IE9. I've made sure that all my vendor specific properties are imported using Compass to make sure I get all the necessary vendor prefixes. I've also checked all partially supported properties to make sure they are supported by at least IE9 with http://caniuse.com/.

When testing my site using IE11 and setting document mode and user agent string to IE9, everything works fine. However, when testing IE9 native through VirtualBox (with the Win7 image from http://dev.modern.ie/tools/vms/), I get a lot of unexpected weird behavior in the CSS.

There seems to be issues with everything from margin-left:15px to float:right. There's no real pattern here, it seems like it's just random css properties that are getting rendered incorrectly.

Why would seemingly normal and well supported properties like margin-left and float be unsupported by IE9? And why are they working in IE11 with IE9 mode, but not in IE9 native?


Solution

  • I found an answer to this random behavior. Turns out, IE9 only supports 4095 CSS selectors and will silently ignore anything following that. (source) I did a check on http://www.cssanalyser.com/ and it showed that I had 4231 selectors. That seems like a lot, but the reason was that I was including Bootstrap, Glyphicons and Font-Awesome in the same main.css, plus my own custom css of course. The solution was to exclude the Font-Awesome part and put that in a separate file. Cssanalyser now shows 3600 selectors and everything works perfectly fine in IE9.