IE8、7、6动态添加样式时，CSS hack的BUG

来源：互联网发布：硬盘修复软件编辑：程序博客网时间：2024/06/06 09:41

问题描述

下面这段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 w3cnode.styleSheet.cssText = style;} else {        // for ienode.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 w3cnode.styleSheet.cssText = style;} else {        // for ienode.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 w3cnode.styleSheet.cssText = style;} else {        // for ienode.appendChild(document.createTextNode(style));}</script></body></html>

参考文章：https://www.phpied.com/the-star-hack-in-ie8-and-dynamic-stylesheets/

阅读全文

0 0