怪异的IE 2

文章截图 - 更好的排版
源代码下载



问题描述
前两天遇到这样的需求，动态的向页面添加CSS样式，是内联的样式而不是外部CSS文件。
和往常一样，我写下了下面的代码：

    function addCSS(content) {
        $("<style />").attr("type", "text/css").html(content).appendTo("head");
    }
    $(function() {
        addCSS("body { background-color: #ccc; }");
    });
    

轻松搞定，当我正为这样简洁的语法暗自高兴时，却发现原本在Firefox下好好的样式在IE居然不见了！
通过IE8的开发人员工具查看，的确没有在Head中发现我们通过JavaScript添加的样式。
并且页面还报JavaScript错误： 


解决办法
这么简单的代码没可能写错啊，并且Firefox下执行是好的。所以我推测应该是IE对style这个标签的处理和Firefox不一样。
再结合IE下的错误提示：意外的调用了方法或属性访问。
那就不调用创建style标签的方法，直接通过拼接字符串的方式来创建style标签，如下：

    function addCSS(content) {
        $('<style type="text/css">' + content + '</style>').appendTo("head");
    }
    $(function() {
        addCSS("body { background-color: #ccc; }");
    });
    

问题居然解决了，现在IE和Firefox下都好了。

深入思考
虽然能很快的解决问题，但是反过来再想一下为什么会出现这个问题。
很快，我在网上找到了这一篇文章
原来IE对style标签的处理方式的确和其他的不同，IE需要设置style节点的styleSheet.cssText属性，
而Firefox对style标签的处理和普通的div没什么分别。
原文作者还提供了一个在IE和Firefox下通用的方法：

    var ss1 = document.createElement('style');
    var def = 'body {color: red;}';
    ss1.setAttribute("type", "text/css");
    if (ss1.styleSheet) {   // IE
        ss1.styleSheet.cssText = def;
    } else {                // the world
        var tt1 = document.createTextNode(def);
        ss1.appendChild(tt1);
    }
    var hh1 = document.getElementsByTagName('head')[0];
    hh1.appendChild(ss1);
    

现在的问题是为什么我们可以简单的通过：$('<style .. />').appendTo("head");就能把问题解决了？

类比Table
如果你以前遇到过在IE下不能设置table的innerHTML的话，这是类似的一个问题，如下所示：

    // 这段代码在Firefox正确运行，在IE下报错
    function createTable() {
        var table = document.createElement("table");
        table.innerHTML = "<tr><td>Content</td></tr>";
        document.body.appendChild(table);
    }
    $(function() {
        createTable();
    });
    

这段代码在Firefox下正确运行，在IE下同样会报如下错误： 


因为在IE下，table的innerHTML是一个只读属性，所以不能通过为innerHTML赋值的方式创建table，
但是我们可以创建整个table，并嵌入在一个div中来在IE下创建一个表格，如下所示：

    // 这段代码在Firefox和IE都能正确运行
    function createTable2() {
        var div = document.createElement("div");
        div.innerHTML = "<table><tr><td>Content2</td></tr></table>";
        document.body.appendChild(div);
    }
    $(function() {
        createTable2();
    });
    

小结
问题到这里已经很明白了，我们的解决方法其实等价于不使用jQuery的如下代码：

    function addCSS2(content) {
        var div = document.createElement("div");
        div.innerHTML = '<style type="text/css">' + content + '</style>';
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(div);
        // 删除style外面的div标签
        head.replaceChild(div.getElementsByTagName("style")[0], div);
    }
    $(function() {
        addCSS2("body { background-color: #ccc; }");
    });
    

大功告成？等等，怎么IE下还报错！！！ 


经过一番痛苦的尝试，终于通过下面一个小技巧（仅仅在innerHTML前面添加一个空格&nbsp;）来解决这个问题，

    function addCSS2(content) {
        var div = document.createElement("div");
        div.innerHTML = '&nbsp;<style type="text/css">' + content + '</style>';
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(div);
        // 删除style外面的div标签
        head.replaceChild(div.getElementsByTagName("style")[0], div);
    }
    $(function() {
        addCSS2("body { background-color: #ccc; }");
    });
    

至于为什么会这样，或许只有IE的开发人员才能回答这个问题。