Today I discovered something amazing and nasty at the same time, the page looked good in any other browser but it didn’t rendered in any version of IE (9, 8, 7). After taking a look at the network traffic I discovered one of the style pages was not loaded (IE never did the proper request to the server asking for the css file). That sounds weird… I looked at the source code and the correct <link> sentence was there, then looked at the HTML structure in the IE developer tools, bam! the link was not processed.
After some research in the internet I found something amazingly nasty: Internet Explorer cannot handle more than 31 <style> sentences in a page. This applies to every version of IE (Internet Explorer 10 fixes this issue and won’t be a problem any more). This applies even with the combination of <link rel=”stylesheet” /> and <style> tags in the same page. This article by Microsoft explains that there is not only a limit for the styles defined but the rules (the article says that you cannot apply more than 4095 rules to a webpage in IE).
I found a nice blog post by John Albin (Drupal Evangelist) about the issue and looks that even using the ugly @import rule you would be limited to 993 stylesheets in the same page for Internet Explorer, ugly.
How to solve this issue? well, the easy way is simplifying your styles and using a style minizer and compressor (like the Bundler or SquishIt for ASP.NET). Lesson learned: “don’t abuse of your stylesheets”.
