zoukankan      html  css  js  c++  java
  • IE8、7、6动态添加样式时,CSS hack的BUG

    问题描述

    下面这段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 ie
    	node.styleSheet.cssText = style;
    } else {        // for w3c
    	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{
    		 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/

  • 相关阅读:
    【docker】更换挂载目录
    【设计】交互走查表
    MySQL常用字符串函数
    VIM_manual
    MySQL操作符
    基础SELECT实例
    MySQL字符集及校对规则的理解
    Linux命令之tar-rsync
    Linux-PATH_环境变量
    MySQL常用数据类型
  • 原文地址:https://www.cnblogs.com/ystrdy/p/7509062.html
Copyright © 2011-2022 走看看