做前端的同学都应该听说或者用过,是一段脚本,可以让ie实现css3里的圆角和阴影效果。
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的测试。
如何给不支持新特性的浏览器打补丁(让老版本IE兼容新特性)
一个非常棒的 JavaScript 框架叫做 Modernizr(http://www.modernizr. com),用于向缺少 HTML5/CSS3特性支持的浏览器打补丁.由 Alexander ...
浅谈CSS hack(浏览器兼容)
今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...
CSS在不同浏览器兼容问题,margin偏移/offset溢出等
margin在垂直取值时取最大值 ird">Owl
IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包