IE兼容CSS3新特性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/marko_zheng/article/details/81663562

IE浏览器的兼容性问题

对于前端来说，最讨厌的应该是调试IE，对于CSS3的属性，有得就不支持，比如

border-radius 圆角
box-shadow 块阴影
border-image 图片边框
multiple background images 多背景
linear-gradient as background image 线性渐变背景图片

解决方法：CSS3 PIE插件，在CSS文件中引入ie-css3.htc时 ，.htc 大概是浏览器补丁模式

这里是插件的下载地址：http://css3pie.com/download/

使用方式：

#test {
    border-radius: 3px;
    behavior: url(PIE.htc);  //css 中使用  behavior  来加载即可自动实现效果，最好使用绝对路径
}

JS的解决方式

<!--在head中引入js-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/PIE.js"></script>


(function($){
    $.pie = function(name, v){
        // 如果没有加载 PIE 则直接终止
        if (! PIE) return false;
        // 是否 jQuery 对象或者选择器名称
        var obj = typeof name == 'object' ? name : $(name);
        // 指定运行插件的 IE 浏览器版本
        var version = 9;
        // 未指定则默认使用 ie10 以下全兼容模式
        if (typeof v != 'number' && v < 9) {
            version = v;
        }
        // 可对指定的多个 jQuery 对象进行样式兼容
        if ($.browser.msie && obj.size() > 0) {     //1.9以上版本jq不支持$.browser.msie方法 
            if ($.browser.version*1 <= version*1) {
                obj.each(function(){
                    PIE.attach(this);
                });
            }
        }
    }
})(jQuery);

$(function(){
    $.pie('.for-ie6', 6);

    var objs = $('.for-ie, .test, .test1, .test2 .test3, #test4');
    $.pie(objs, 9);
});

为了测试IE5-IE11可以使用IETest