CSS的htc文件对于脚本生成的html无效的处理方法

zhaosnow 2019-06-20

最近用PIE.htc开发CSS3的网页时,发现用到PIE.htc的CSS效果对于用脚本生成的html代码都无效的情况

众所周知htc是IE针对CSS开放的一种特殊实现方式

htc的实现是在页面载入完成后开始的,类似于js的window.onload(),它并不是像CSS语言那样,成为浏览器原生的语言,所以当页面内容使用js生成时,其他css效果都会展现,唯独htc的效果不会出现,因为此时它已经过了执行时间了

因此,需要让htc效果继续出现,就要用js操纵一次,让htc再次执行一遍。

IE为此专门为DOM节点添加了一个addBehavior方法,用于执行htc文件的。

具体使用方法如下:

原本的CSS代码:

#b {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/PIE.htc);
}

插入html并使htc执行的jQuery代码:

$(window.body).append('<div id="b"></div>');
$('#b').get(0).addBehavior('/PIE.htc'); 
// 或 document.getElementById('b').addBehavior('/PIE.htc');

建议在执行addBehavior前,先判断下浏览器是否支持该方法,如:

if(window.body.addBehavior){
    document.getElementById('b').addBehavior('/PIE.htc');
}
 

相关推荐