昨晚进行了一次项目更新，今早发现在 IE9 上样式错乱厉害。

按照一般 CSS 问题排查， 并未发现异处。

  1. 样式文件全部加载，写法 IE 兼容。
  2. DOM 元素对应样式无漏。

但是，通过 IE9 自带的开发工具发现，很多元素的样式并未起作用。大概情况就是: CSS 写法没有问题，元素也添加了对应样式，但 IE 直接把样式定义忽略了。

那在什么情况下，IE9 会忽略样式？

一篇微软开发者博客给出了详细答案： Stylesheet Limits in Internet Explorer 。

文章提到，一共有三种情况会出现类似问题：

  1. 一个 CSS 文件超过了 4095 规则定义。
  2. 外链 CSS 文件超过 31 个。
  3. CSS 定义嵌套层数超过 4 层。

针对我们项目，很快将问题定位到第一点。当我将项目中一个非常大的样式文件，按照模块拆分支后，问题得以顺利解决。

BTW: 出现这个问题的本质还是 IE9 和以下版本太过古老，IE10 之后，这个限制已大大提高，基本不是问题了，当然其他浏览器就更不是问题了。

总结： 话说我还是第一次遇到这样问题，出了问题不要怕，官网有说明哦～