美文网首页
IE9以下浏览器对CSS3的常用兼容处理

IE9以下浏览器对CSS3的常用兼容处理

作者: 辣瓜瓜 | 来源:发表于2017-06-27 17:40 被阅读310次

html5shiv.js主要功能：

html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

respond.min.js主要功能：

respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

条件判断如下：
<!--[if lt IE 9]>

　　<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>

 　　<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<![endif]-->

PIE.js 和 PIE.htc

官方网站：http://css3pie.com/
演示地址：http://css3pie.com/demos/gradient-patterns/

主要功能：

1.兼容border-radius;
2.阴影效果;
3.部分 CSS3 的效果，如 多张背景图，border-image，背景颜色渐变效果;
4.png 图片透明效果;

PIE.htc使用方法：
#test {
    border-radius: 3px;
    behavior: url(/PIE.htc);
}
PIE.js使用方法：
<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
    PIE.attach(document.getElementById("test"));
</script>
配合 jQuery 使用
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
(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) {
            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);
});
</script>

相关文章