Internet Explorer 的 CSS 规则限制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9906794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer's CSS rules limits
提问by Barg
I've read conflicting information regarding Internet Explorer's silly CSS limits. I am (think I am) understanding that you can only have 31 <style>and <link>tags (combined), and that each sheet can have up to 31 @import-s (so 31 <link>-s, each to 31 @import-s is fine, albeit insane).
我读过有关 Internet Explorer 愚蠢的 CSS 限制的相互矛盾的信息。我（认为我）理解你只能有 31 个<style>和<link>标签（组合），并且每张纸最多可以有 31 个@import-s（所以 31 <link>-s，每个到 31 @import-s 都很好，虽然很疯狂）。
However, the 4095 rule is less clear - is this 4095 rules per document, or per sheet? For instance, can I <link>to two stylesheets, each with 4000 rules, and have it work, or will this break the limit?
但是，4095 规则不太清楚——这是每份文档还是每张纸 4095 条规则？例如，我<link>可以使用两个样式表，每个样式表都有 4000 条规则，并让它工作，或者这会打破限制吗？
3rd party edit 2018
2018年第3方编辑
On this msdn blog post stylesheet-limits-in-internet-explorerfurther information is given.
在此msdn 博客文章 stylesheet-limits-in-internet-explorer 中提供了更多信息。
回答by isNaN1247
Referring the following from Microsoft:
参考 Microsoft 的以下内容：
- Stylesheet Limits in Internet Explorer
- KB - A webpage that uses CSS styles does not render correctly in Internet Explorer
The rules for IE9are:
IE9的规则是：
- A sheetmay contain up to 4095 selectors (Demo)
- A sheetmay @import up to 31 sheets
- @import nesting supports up to 4 levels deep
- 一张表最多可包含 4095 个选择器（演示）
- 一张纸最多可以@import 31 张
- @import 嵌套最多支持 4 级深度
The rules for IE10are:
IE10的规则是：
- A sheetmay contain up to 65534 selectors
- A sheetmay @import up to 4095 sheets
- @import nesting supports up to 4095 levels deep
- 一张表最多可包含 65534 个选择器
- 一张纸最多可以@import 4095 张
- @import 嵌套最多支持 4095 级深度
Testing the 4095 rule by sheet limit
按图纸限制测试 4095 规则
By way of confirmation, I've created a gistwith 3 files. One HTML, and two CSS files.
作为确认，我创建了一个包含 3 个文件的要点。一个 HTML 和两个 CSS 文件。
- The first file contains 4096 selectors and means that its final selector doesn't get read in.
- The second file (4095.css) has one less selector, and gets read in, and works perfectly in IE (even though its already read another 4095 selectors from the previous file.
- 第一个文件包含 4096 个选择器，这意味着它的最终选择器不会被读入。
- 第二个文件 (4095.css) 少了一个选择器，可以读入，并在 IE 中完美运行（即使它已经从前一个文件中读取了另一个 4095 选择器。
回答by EpokK
A javascript script to count your CSS rules:
一个 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();
回答by krisbulman
I don't have enough rep to comment on the above similar snippet, but this one counts the @media rules. Drop it in Chrome console.
我没有足够的代表来评论上述类似的片段，但这一点计算了@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();source: https://gist.github.com/krisbulman/0f5e27bba375b151515d
回答by Night Owl
According to a page on the MSDN IEInternals blog entitled Stylesheet Limits in Internet Explorerthe limits shown above (31 sheets, 4095 rules per sheet, and 4 levels) applied to IE 6 through IE 9. The limits were increased in IE 10 to the following:
根据 MSDN IEInternals 博客上题为Internet Explorer 中的样式表限制的页面，上面显示的限制（31 张，每张 4095 条规则和 4 个级别）适用于 IE 6 到 IE 9。IE 10 中的限制增加到以下：
- A sheet may contain up to 65534 rules
- A document may use up to 4095 stylesheets
- @import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)
- 一张表最多可包含 65534 条规则
- 一个文档最多可以使用 4095 个样式表
- @import 嵌套限制为 4095 级（由于 4095 样式表限制）
回答by Tom Teman
A nice solution to this problem for people using Grunt:
对于使用 Grunt 的人来说，这个问题的一个很好的解决方案：
回答by Mike Hague
Developer tools within FireFox dev edition shows CSS rules
FireFox 开发版中的开发者工具显示 CSS 规则
Might be handy for those of you still fighting with older IE versions / large CSS files.
对于那些仍在与旧 IE 版本/大型 CSS 文件作斗争的人来说可能会很方便。
回答by Shannon Hochkins
I think it's also worth noting that any CSS file larger than 288kb will only be read up until that ~288kb. Anything after will be completely ignored in IE <= 9.
我认为还值得注意的是，任何大于 288kb 的 CSS 文件只会在 ~288kb 之前被读取。在 IE <= 9 中之后的任何内容都将被完全忽略。
http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit
http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit
My advice is to keep CSS files for larger applications split up into modules & components and keep a constant eye on filesize.
我的建议是将大型应用程序的 CSS 文件分成模块和组件，并时刻关注文件大小。
