Home

小鱼驿站

24 Jun 2015

IE 样式限制的问题

昨晚进行了一次项目更新,今早发现在 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 之后,这个限制已大大提高,基本不是问题了,当然其他浏览器就更不是问题了。

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

Til next time,
small_fish__ at 22:31

scribble