IE6&7下使用CSS3(ie-css3.htc的使用及加强版)

原创 达拉崩吧 教程 CSS 244阅读 2017-11-23 10:13:36 举报

转载

做前端的同学都应该听说或者用过,是一段脚本,可以让ie实现css3里的圆角和阴影效果。

css带来的便利是很容易感受的到的,但恶心的是它在ie下的不兼容,所以某位牛人现身写了个ie-css3.htc,允许你在ie下去使用css3的部分东西。

ie-css3的使用方法很简单,在你需要使用css3的样式里加入behavior: url(js/ie-css3.htc);就可以了(括号里是ie-css3.htc的地址)
ie-css3.htc

用法大致如下:
.box {
-moz-border-radius: 15px; / Firefox /
-webkit-border-radius: 15px; / Safari and Chrome /
border-radius: 15px; / Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 /

-moz-box-shadow: 10px 10px 20px #000;    /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000;         /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc);              /* This lets IE know to call the script on all elements which get the 'box' class */

}

ie-css3.htc 加强版
下载增强版ie-css3.htc

最近用到了这个东西,发现动态改变div的内容之后,这段脚本生成的vml会出现变形。。
所以加了一个手动刷新的函数,通过innerHTML赋值之后调用一下就可以了
el.innerHTML = '....';
if(window.update_css3_fix) update_css3_fix(el);

如果使用jquery就不用这么麻烦,在你的框架里加一段

(function()
{
if (!jQuery.browser.msie) return;
jQuery.fn.ohtml = jQuery.fn.html;
jQuery.fn.html = function(value)
{
jQuery(this).ohtml(value);
this.each(function()
{
update_css3_fix(this);
});
return this;
};
})();

评论 ( 4 )
最新评论
天凉好个秋 3F 2017-11-24 14:44:40 4F

哈哈哈

达拉崩吧 2F 2017-11-24 11:04:51 3F

你认为呢,不然我记这个干啥(托腮

天凉好个秋 2017-11-23 17:50:56 2F

i6 i7 现在除了一些政府一些老旧玩意用到 国内还有谁用到 直接放弃i6i7吧

冬冬学坏了 2017-11-23 10:52:46 1F

不知道有没有用