當使用 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。

   

創作者介紹
創作者 大笨鳥 的頭像
大笨鳥

大笨鳥的私房菜

大笨鳥 發表在 痞客邦 留言(0) 人氣()