css3怎么兼容ie?

css3怎么兼容ie?下面本篇文章给大家介绍一下css3在IE下兼容的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

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

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

ie-css3.htc

http://fetchak.com/ie-css3/

ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

用法大致如下:

.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

http://files.cnblogs.com/aiyuchen/ie-css3.htc.zip

更多web前端知识,请查阅 HTML中文网 !!

以上就是css3怎么兼容ie?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读