Internet explorer 10 removed style sheet limits

In Internet Explorer 9 or below, there are known style sheet limits which makes the css rules and styles cannot work or render properly. The limits are 4095 css rules per style sheet, only 31 style sheets can be included in page, and maximum 4 recursive @import. It makes different to other modern browsers like Firefox and Chrome. According to the Internet Explorer 10 Developer Guide, it is glad to know the above limits had been removed.

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.