美文网首页
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>
    

    相关文章

      网友评论

          本文标题:IE9以下浏览器对CSS3的常用兼容处理

          本文链接:https://www.haomeiwen.com/subject/mmvecxtx.html