Internet Explorer的CSS规则限制

我读过有关Internet Explorer愚蠢CSS限制的冲突信息。 我（认为我）理解你只能有31个<style>和<link>标签（组合），并且每个工作表最多可以有31个@import -s（so 31 <link> -s，每个31 @import -s没问题，虽然疯了）。

然而，4095规则不太清楚 – 这是每个文档或每张纸上的4095个规则吗？ 例如，我可以<link>到两个样式表，每个样式表都有4000个规则，并且可以工作，或者这会打破这个限制吗？

Answer 1

从微软引用以下内容：

• 样式表限制在Internet Explorer中
• KB – 使用CSS样式的网页在Internet Explorer中无法正确呈现

IE9的规则是：

• 一张表最多可以包含4095个select器（演示）
• 一张纸最多可以input31张纸
• @import嵌套最多支持4级

IE10的规则是：

• 一张表最多可以包含65534个select器
• 一张纸最多可以input4095张纸
• @import嵌套最多支持4095个层次

按工作表限制testing4095规则

通过确认， 我创build了 3个文件的要点 。 一个HTML和两个CSS文件。

• 第一个文件包含4096个select器，意味着它的最终select器不会被读入。
• 第二个文件（4095.css）有一个较less的select器，并被读入，并在IE中完美工作（即使它已经从前一个文件中读取了另外的4095个select器。

Answer 2

一个javascript脚本来计算你的CSS规则：

 function countCSSRules() { var results = '', log = ''; if (!document.styleSheets) { return; } for (var i = 0; i < document.styleSheets.length; i++) { countSheet(document.styleSheets[i]); } function countSheet(sheet) { if (sheet && sheet.cssRules) { var count = countSelectors(sheet); log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag'); log += '\nRules: ' + sheet.cssRules.length; log += '\nSelectors: ' + count; log += '\n--------------------------'; if (count >= 4096) { results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n'; } } } function countSelectors(group) { var count = 0 for (var j = 0, l = group.cssRules.length; j < l; j++) { var rule = group.cssRules[j]; if (rule instanceof CSSImportRule) { countSheet(rule.styleSheet); } if (rule instanceof CSSMediaRule) { count += countSelectors(rule); } if( !rule.selectorText ) { continue; } count += rule.selectorText.split(',').length; } return count; } console.log(log); console.log(results); }; countCSSRules(); 

Answer 3

我没有足够的代表来评论上述类似的片段，但是这个统计@media规则。 将其放在Chrome控制台中。

 function countCSSRules() { var results = '', log = ''; if (!document.styleSheets) { return; } for (var i = 0; i < document.styleSheets.length; i++) { countSheet(document.styleSheets[i]); } function countSheet(sheet) { var count = 0; if (sheet && sheet.cssRules) { for (var j = 0, l = sheet.cssRules.length; j < l; j++) { if (!sheet.cssRules[j].selectorText) { if (sheet.cssRules[j].cssRules) { for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) { if(sheet.cssRules[j].cssRules[m].selectorText) { count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length; } } } } else { count += sheet.cssRules[j].selectorText.split(',').length; } } log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag'); log += '\nRules: ' + sheet.cssRules.length; log += '\nSelectors: ' + count; log += '\n--------------------------'; if (count >= 4096) { results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n'; } } } console.log(log); console.log(results); }; countCSSRules(); 

Answer 4

根据MSDN IEInternals博客中的样式表限制，Internet Explorer中的样式表限制适用于通过IE 9的IE 6的上述限制（31张，每张4095个规则和4个级别）。IE 10中的限制增加到以下：

• 工作表最多可以包含65534个规则
• 一个文档最多可以使用4095个样式表
• @import嵌套被限制在4095个级别（由于4095的样式表限制）

Answer 5

对于使用Grunt的人来说，这是一个很好的解决scheme：

https://github.com/Ponginae/grunt-bless

Answer 6

FireFox开发工具中的开发人员工具显示CSS规则

对于那些仍然在使用较旧的IE版本/大型CSS文件的人来说，可能会很方便。

FF开发版网站

Answer 7

我认为值得注意的是，大于288kb的任何CSS文件只能被读取到〜288kb。 之后的任何事情都将在IE <= 9中被完全忽略。

http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit

我的build议是保持大型应用程序的CSS文件分解成模块和组件，并持续关注文件大小。