CSS Not Rendering Completely in IE9

Question

I've built a site using WordPress and Foundation 5. It renders well in modern browsers, but the client needs it to run in IE9. I'm testing it in IE9 using a Windows virtual machine running Windows 7 and the site is not loading the CSS completely or correctly, and only some of the rules are being recognized, usually the first instance of a rule and none of the succeeding instances.

Things I've tried already

I have a doctype declaration
I've included <meta http-equiv="X-UA-Compatible" content="IE=edge" /> first in my header
Double checked for stray console.log in my jQuery
~~I have fewer than 4096 selectors in my CSS~~
I've tested with all plugins turned off and scripts removed
I've fixed all the HTML validation errors I can

Staging site: http://sytycw.pixelsmithdesign.com

Any help would be greatly appreciated.

EDIT: As justbeez pointed out below I did have more than 4095 selectors, once I counted multiples.

Are the stylesheets being interpreted as CSS, or plain text? — rnevius

justbeez justbeez · Accepted Answer · 2015-09-01T00:23:09

You're actually over the 4095 selector limit for the following file: http://sytycw.pixelsmithdesign.com/wp-content/themes/sytycw_2015/css/foundation.css

The difference here from your counts is that you need to include the nested levels of rules within the @media declarations.

krisbulman has a version of a simple count script that you can run in DevTools to get the count (I would run it in Chrome so you get the warning; if not it'll only show 4095): https://gist.github.com/krisbulman/0f5e27bba375b151515d

My output for the URL you posted is as follows:

File: inline <style> tag
Rules: 1
Selectors: 1
--------------------------
File: http://sytycw.pixelsmithdesign.com/wp-content/plugins/candidate-voting/resources/frontend/candidate-voting.css
Rules: 6
Selectors: 6
--------------------------
File: http://sytycw.pixelsmithdesign.com/wp-content/plugins/revslider-5.0/public/assets/css/settings.css
Rules: 220
Selectors: 303
--------------------------
File: inline <style> tag
Rules: 9
Selectors: 12
--------------------------
File: http://sytycw.pixelsmithdesign.com/wp-content/themes/sytycw_2015/css/foundation.css
Rules: 1776
Selectors: 4419
--------------------------
File: http://sytycw.pixelsmithdesign.com/wp-content/plugins/sytycw-manuscripts-1.0.5.1/resources/frontend/sytycw-manuscripts.css
Rules: 1
Selectors: 1
--------------------------
File: inline <style> tag
Rules: 1
Selectors: 1
--------------------------
VM1068:39 
********************************
WARNING:
There are 4419 CSS rules in the stylesheet http://sytycw.pixelsmithdesign.com/wp-content/themes/sytycw_2015/css/foundation.css - IE will ignore the last 323 rules!

You could easily test this by adding a new stylesheet that splits out half the rules (I personally just added a style block in IE's dev tools with the last of the rules and saw everything snap into place).

CSS Not Rendering Completely in IE9

1 Answers