Создание CSS с помощью jQuery (prependTo & append) не будет работать для Internet Explorer

Question

Я хочу создать большой CSS, и он отлично работает в Firefox и Crome, но Internet Explorer не понимает мой скрипт jQuery. Есть идеи, как решить эту проблему?

$("<style>")
    .attr("type","text/css")
    .prependTo("head")
    .append("h1 {color: #F00}")
    .append("h2 {color: #0F0}")
    .append("h3 {color: #00F}")

Answer 1

Используйте этот код для динамического добавления правил CSS (протестировано на большинстве браузеров):

function dyn_css_rule(sSelector, sCssText) {
    try {
        var aSS = document.styleSheets;
        var i;
        for (i=aSS.length-1; i>=0; i--) {
            var oCss = document.styleSheets[i];
            var sMedia = (typeof(oCss.media) == "string")?
                oCss.media:
                oCss.media.mediaText;
            if (!sMedia
                || sMedia.indexOf("screen") != -1
                || sMedia.indexOf("all") != -1
            ) {
                break;
            }
        }
        if (oCss.insertRule) {
            oCss.insertRule(sSelector + " {" + sCssText + "}", oCss.cssRules.length);
        } else if (oCss.addRule) {
            oCss.addRule(sSelector, sCssText);
        }
    } catch(err) {
        var tag = document.createElement('style');
        tag.type = 'text/css'; 
        try {
            tag.innerHTML = sSelector + " {" + sCssText + "}";
        } catch(err) {
            tag.innerText = sSelector + " {" + sCssText + "}";
        }
        document.getElementsByTagName('head')[0].appendChild(tag);
    }
    return sSelector + "{" + sCssText + "}";
};

Использование:

dyn_css_rule("h1", "color: #F00");

Answer 2

Попробуйте $("<style></style>"). IE не нравится единственная версия.

$("<style></style>").attr("type","text/css")
    .prependTo("head")
    .append("h1 {color: #F00}")
    .append("h2 {color: #0F0}")
    .append("h3 {color: #00F}");