标签:img rip ges div star 文章 nts tle 绿色
下面这段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/
标签:img rip ges div star 文章 nts tle 绿色
原文地址:http://www.cnblogs.com/ystrdy/p/7509062.html