CSS 无法在 IE9 中完全呈现
CSS Not Rendering Completely in IE9
我使用 WordPress 和 Foundation 5 构建了一个站点。它在现代浏览器中呈现效果很好，但客户端需要它在 IE9 中 运行。我正在使用 Windows 虚拟机 运行ning Windows 7 在 IE9 中对其进行测试，该站点没有完全或正确地加载 CSS，并且只有一些规则正在被识别，通常是规则的第一个实例和后续实例的 none。
我已经尝试过的东西
- 我有一个文档类型声明
- 我在 header
中首先包含了 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- 在我的 jQuery
中仔细检查了是否存在偏离 console.log
我的 CSS- 我已经在关闭所有插件并删除脚本的情况下进行了测试
- 我已经修复了所有 HTML 验证错误
暂存站点：http://sytycw.pixelsmithdesign.com
如有任何帮助，我们将不胜感激。
编辑：正如 justbeez 在下面指出的那样，一旦我计算了倍数，我确实有超过 4095 个选择器。
您实际上超过了以下文件的 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 的开发工具中添加了一个带有最后一条规则的样式块，然后看到所有内容都已就位）。
我使用 WordPress 和 Foundation 5 构建了一个站点。它在现代浏览器中呈现效果很好，但客户端需要它在 IE9 中 运行。我正在使用 Windows 虚拟机 运行ning Windows 7 在 IE9 中对其进行测试，该站点没有完全或正确地加载 CSS，并且只有一些规则正在被识别，通常是规则的第一个实例和后续实例的 none。
我已经尝试过的东西
- 我有一个文档类型声明
- 我在 header 中首先包含了
- 在我的 jQuery 中仔细检查了是否存在偏离
我的 CSS 中的选择器少于 4096 个
- 我已经在关闭所有插件并删除脚本的情况下进行了测试
- 我已经修复了所有 HTML 验证错误
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
console.log
暂存站点：http://sytycw.pixelsmithdesign.com
如有任何帮助，我们将不胜感激。
编辑：正如 justbeez 在下面指出的那样，一旦我计算了倍数，我确实有超过 4095 个选择器。
您实际上超过了以下文件的 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 的开发工具中添加了一个带有最后一条规则的样式块，然后看到所有内容都已就位）。