帅的相对论 2012-04-23
最近用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'); }