大笨鳥的私房菜

當使用 innerHTML 插入下列的文字，你覺得瀏覽器會如何呈現呢？
 
    <style type='text/css'>
            .t1-class{color:red}
    </style>
    <span class='t1-class my-size'>ABC</span>
 
從上面的 html code 看來，應該會在瀏覽器上呈現出紅色字體的 ABC，實際上使用 firefox 來執行用 innerHTML 插入上述的 html code 時，的確會在 firefox 上呈現紅色字體的 ABC，但是在 IE 上可不是這麼一回事了，使用 innerHTML 語法插入上述的 html code 時，ABC 是有呈現，但卻不是紅色的，顯然 CSS 並沒有被套上去。
 
後來在網路上找到這一篇文章(http://www.pjhome.net/article/812.htm)，上面是說 IE 在執行 innerHTML 時有一定的先後順序，也就是若內含 css code 的話，要先放 html code 後放 css code，因此若將上述的 html code 改成：
 
    <span class='t1-class my-size'>ABC</span>
    <style type='text/css'>
            .t1-class{color:red}
    </style>

如此一來在 IE 上就能出現紅色字體的 ABC了。
附帶一提，這樣的規則一樣適用在引用外部 css 檔(也就是使用<link> tag)，若有要用 innerHTML 引入含有 <link src='xxx.css'/> 文字時，也要把 <link> 放在 html code 後面才能正常套用到 css。