ie css problems

File size

The file size is limitated to 288 kb.Article

Number of selectors

Within IE 9 there is a problem with selectors. There is a limit of the total css selectors you can use. Referring the following from Microsoft:

• Stylesheet Limits in Internet Explorer
• KB - A webpage that uses CSS styles does not render correctly in Internet Explorer

Stylesheet Limits in Internet Explorer KB - A webpage that uses CSS styles does not render correctly in Internet Explorer The rules for IE9 are:

A sheet may contain up to 4095 rules A sheet may @import up to 31 sheets @import nesting supports up to 4 levels deep

A simple script to count your number of selectors:

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {
        var count = 0;
        if (sheet && sheet.cssRules) {
            for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
                var rule = sheet.cssRules[j];
                if (rule instanceof CSSImportRule) {
                    countSheet(rule.styleSheet);
                }
                if( !rule.selectorText ) {
                    continue;
                }
                count += rule.selectorText.split(',').length;
            }

            log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
            log += '\nRules: ' + sheet.cssRules.length;
            log += '\nSelectors: ' + count;
            log += '\n--------------------------';
            if (count >= 4096) {
                results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
            }
        }
    }
    console.log(log);
    console.log(results);
};

Source