CSS不完全在IE9中渲染

时间:2015-08-31 23:26:25

标签: css wordpress internet-explorer-9 zurb-foundation-5

我使用WordPress和Foundation 5构建了一个网站。它在现代浏览器中渲染得很好,但客户端需要它在IE9中运行。我使用运行Windows 7的Windows虚拟机在IE9中测试它,并且该站点没有完全或正确加载CSS,并且只识别了一些规则,通常是规则的第一个实例,而不是接下来的实例。

我已经尝试过的事情

  • 我有一个doctype声明
  • 我在标题中首先包含了<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  • 在我的jQuery
  • 中仔细检查了迷路console.log
  • 我的CSS中有少于4096个选择器
  • 我已经关闭了所有插件并删除了脚本进行了测试
  • 我已修复了我可以
  • 的所有HTML验证错误

暂存网站:http://sytycw.pixelsmithdesign.com

非常感谢任何帮助。

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

1 个答案:

答案 0 :(得分:2)

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

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

krisbulman有一个简单计数脚本的版本,您可以在DevTools中运行以获取计数(我会在Chrome中运行它以便您收到警告;如果不是,它只会显示4095) : https://gist.github.com/krisbulman/0f5e27bba375b151515d

您发布的网址的输出如下:

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的开发工具中添加了一个样式块,其中包含最后一个规则,并且看到所有内容都准确到位)。 / p>