IE8、7、6動態添加樣式時,CSS hack的BUG
阿新 • • 發佈:2017-09-12
node.app 更新 什麽 -i ext .com span css樣式 結果
問題描述
下面這段CSS代碼通過JS動態添加,結果會怎樣呢?
.box { background: red; /* normal browsers */ *background: blue; /* IE 6 and 7 */ _background: green; /* IE6 */ }
通過以下代碼添加到頁面中
var node = document.createElement(‘style‘); node.type = ‘text/css‘; if (node.styleSheet) { // for w3c node.styleSheet.cssText = style; } else { // for ie node.appendChild(document.createTextNode(style)); } document.getElementsByTagName(‘head‘)[0].appendChild(node);
從代碼來看,>=IE8和現代瀏覽器的.box的顏色是紅色的,IE7是藍色的,IE6是綠色的,那麽實際呢?
IE6:
IE7:
IE8:
Chrome:
怎麽回事???
從上面的截圖可以看到,只有Chrome和IE6是正常的,IE7和IE8表現有問題。
IE7的表現為使用了IE6 hack(_ hack)
IE8的表現為使用了IE7 hack(* hack)
解決方法
直接上代碼:
var node = document.createElement(‘style‘); node.type = ‘text/css‘; document.getElementsByTagName(‘head‘)[0].appendChild(node);if (node.styleSheet) { // for w3c node.styleSheet.cssText = style; } else { // for ie node.appendChild(document.createTextNode(style)); }
其實沒什麽變化,就是移動了appendChild那一句代碼的位置。
由原來的先添加CSS樣式,然後再添加到head上,變成了先添加到head上面,再更新CSS樣式。
再次刷新IE7、8,現在的表現正常了。
貼上測試代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 100px; height: 100px; } </style> </head> <body> <div class="box"></div> <script> var node = document.createElement(‘style‘), style = ‘.box {background: red;*background: blue;_background: green;}‘; node.type = ‘text/css‘; document.getElementsByTagName(‘head‘)[0].appendChild(node); if (node.styleSheet) { // for w3c node.styleSheet.cssText = style; } else { // for ie node.appendChild(document.createTextNode(style)); } </script> </body> </html>
參考文章:https://www.phpied.com/the-star-hack-in-ie8-and-dynamic-stylesheets/
IE8、7、6動態添加樣式時,CSS hack的BUG