Affects: IE6, IE7, IE8
Microsoft Support KB: 262161
You may already be aware that Internet Explorer has some limitations with the amount of CSS it can handle (bug 327) so that you can only load a CSS file up to ~288kb in size and the total number of CSS selectors/style rules can't exceed 4096 but there's more!
IE will also only allow you to have a maximum of 30 style tags on a page! So if you have a site that injects a lot of style tags on the fly for components/widgets you may want to think twice about this approach.
Run this code in IE and note that IE caps out at 30 and doesn't create the addition 70 stylesheet tags.
Example:
(note: this is IE specific code)
<html>
<head>
<script type="text/javascript">
function createStyleSheets(){
for(i=0;i<100;i++){
document.createStyleSheet();
var msg = 'Total Style Sheets = [<b>' + i + '</b>] of 100.';
document.getElementById('ssCount').innerHTML = msg;
}
}
</script>
</head>
<body onload="createStyleSheets();">
<div id="ssCount"></div>
</body>
</html>
How many style tags do you have on your page? Add this bookmarklet to your browser and find out. (note if you run it in IE and it says 30, you may well have hit the limit!)
# style tags
Known Workarounds: None.
Related Issues: (bug 327).
Submit a bug
Posts
