【css老版本浏览器兼容利器】ie-css3.htc
2015-09-22 10:05
441 查看
做前端的同学都应该听说或者用过,是一段脚本,可以让ie实现css3里的圆角和阴影效果。
css带来的便利是很容易感受的到的,但恶心的是它在ie下的不兼容,所以某位牛人现身写了个ie-css3.htc,允许你在ie下去使用css3的部分东西。
ie-css3的使用方法很简单,在你需要使用css3的样式里加入behavior: url(js/ie-css3.htc);就可以了(括号里是ie-css3.htc的地址)
用法大致如下:
所以加了一个手动刷新的函数,通过innerHTML赋值之后调用一下就可以了
如果使用jquery就不用这么麻烦,在你的框架里加一段
另外官网下载的脚本还会产生yourdomain/none的404请求,也已经修复
css带来的便利是很容易感受的到的,但恶心的是它在ie下的不兼容,所以某位牛人现身写了个ie-css3.htc,允许你在ie下去使用css3的部分东西。
ie-css3的使用方法很简单,在你需要使用css3的样式里加入behavior: url(js/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 加强版
最近用到了这个东西,发现动态改变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; }; })();
另外官网下载的脚本还会产生yourdomain/none的404请求,也已经修复
下面是我对ie-css3.htc的测试。
相关文章推荐
- 纯CSS绘制三角形(多个角度)
- css--左右visibility建立 “collapse”值问题
- CSS技巧
- 一点css技巧和对iOS delegate的理解
- css定位
- CSS中float的应用
- bfc样式控制
- 关于css排版的一些属性
- CSS浮动与定位
- JS+CSS实现类似QQ好友及黑名单效果的树型菜单
- JS+CSS实现带小三角指引的滑动门效果
- css学习笔记(三)-元素背景background
- 【css】web标准
- 浅谈css样式(border、background、table)
- CSS3动画之旋转魔方盒
- CSS-1、选择器
- CSS盒模型
- 【CSS】盒模型+选择器(你选择的要操作的对象)
- CSS3动画之透视
- css学习备忘