CSS在IE9中没有完全渲染

Question

我用WordPress和Foundation 5建立了一个网站。它在现代浏览器中呈现良好，但客户端需要它在IE9中运行。我在IE9中使用运行Windows 7的Windows虚拟机进行测试，网站没有完全或正确地加载CSS，并且只有一些规则被识别，通常是规则的第一个实例，而随后的实例都没有。

我已经尝试过的事情

我有一个doctype声明
• 我已经包括<meta http-equiv="X-UA-Compatible" content="IE=edge" />第一在我的头
• 在我的jQuery
中双重检查流浪console.log
• 我的CSS中有少于4096个选择器
• 我已经测试了所有插件关闭和脚本删除
我已经修复了所有的HTML验证错误，我可以

分期地点:http://sytycw.pixelsmithdesign.com

任何帮助都将是非常感激的。

编辑:正如justbeez指出的那样，一旦我计算了倍数，我确实有超过4095个选择器。

Answer 1

您实际上超过了以下文件的4095选择器限制:http://sytycw.pixelsmithdesign.com/wp-content/themes/sytycw_2015/css/foundation.css

这里与你的计数的不同之处在于，你需要在@media声明中包含嵌套的规则级别。

krisbulman有一个简单的计数脚本版本，你可以在DevTools中运行以获得计数(我会在Chrome中运行它，这样你就可以得到警告;如果不是，它将只显示4095):https://gist.github.com/krisbulman/0f5e27bba375b151515d

我对你发布的URL的输出如下:

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!

你可以很容易地通过添加一个新的样式表来测试这一点，该样式表将一半的规则分开(我个人只是在IE的开发工具中添加了一个样式块，其中包含了最后的规则，并且看到了所有内容都被纳入了位置)。