搜索加限制条件css,Internet Explorer的CSS规则限制

从微软引用以下内容：

样式表限制在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器。

一个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

我没有足够的代表来评论上述类似的片段，但是这个统计@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

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

工作表最多可以包含65534个规则

一个文档最多可以使用4095个样式表

@import嵌套被限制在4095个级别(由于4095的样式表限制)

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

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

FF开发版网站

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

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