Search code examples
csswordpressinternet-explorer-9zurb-foundation-5

CSS Not Rendering Completely in IE9

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.

Solution

  • 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).