May 10, 2014

Fix css rules and styles cannot work or render properly in internet explorer

When doing a web page that needs to support IE9 or below, you may found that css rules or styles cannot work or render properly in Internet Explorer but works in other browsers. It may related to the hidden limitation in Internet Explorer.

According to kb262161 in Microsoft, it outlines that
  • All style tags after the first 31 style tags are not applied.
  • All style rules after the first 4,095 rules are not applied.
  • On pages that uses the @import rule to continuously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

Work around to solve the issue mentioned above :
  1. If you have 4095 rules in a style sheet files, try to move some rules to a separated style sheet file and include it.
  2. If you cannot eliminate the css rules, move some rules to a separated style sheet file.
  3. If @import is not necessary, skip it and directly include the style sheet file in your page instead.

No comments:

Post a Comment