美文网首页程序员
处理兼容最好的方法就是“不处理兼容”

处理兼容最好的方法就是“不处理兼容”

作者: Cherry9507 | 来源:发表于2017-10-13 17:08 被阅读0次
    我待ie如初恋,ie虐我千百遍。

    十月,ie请善待我。

    在程序员的世界,关于ie谈论最多的就是兼容问题,连百度都知道,不信你搜个ie试试!
    涉及到ie的项目,会让你后悔自己学的新知识,比如css3,H5新特性。我习惯用新属性写代码,毕竟现在流量趋势从pc端转向移动端,很多公司都不用考虑ie兼容问题,但是人在江湖,身不由己啊,有时候根据公司的客户群,你不得不考虑兼容ie。

    说说最近遇到的尴尬问题。
    1. background-size 不兼容ie8及ie8以下:解决办法
    1.不要用background-image,改用img标签定位不就完了!如果情非得已,请看第二条
    
    2.(滤镜)不能指定任意大小background百分比,可用cover,用于单张图片不能使用图片精灵等拼图,要引用绝对路径图片,兼容ie7,8
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale')
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale')";
    
    3.可指定百分比,.htc要相对文档路径,兼容ie7,8
    .selector { background-size: cover; -ms-behavior:url(/backgroundsize.min.htc); }
    

    2.border-radius 不兼容ie8:解决办法、

    background-image:url('写你的图片路径');
    position:relative; 
    z-index:2; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(PIE.htc); 
    /*1.元素的position:relative或者absolute 
      2.z-index比周围元素高。
      3. htc文件必须是绝对路径*/
    文末提供下载链接,目前一个问题:是如果你的圆角按钮有hover事件,那么会有一个背景上的bug
    

    3.foreach不兼容问题

    网上试了很多foreach兼容方法都没有成功,问题出在哪里未知,我自己使用了闭包
    for(var i = 0;i<arr.length;i++){
        (function(i){
            写你的代码
        })(i)
    }
    

    4.如果你用getElementsByClassName,很不巧ie8它看不懂:解决办法

    var seleTableTr = document.getElementById("selectTable2_tr");
    /*用空数组来承接seleTableTr是一个保险做法,如果你后面用到seleTableTr不报错,你也有可以省掉这一步*/
     var num = [];
     for(var item in seleTableTr){
         num.push(item)
     }
    

    其实,最好的办法就是寻找替代兼容性差的属性或方法,你写的代码,不需要做兼容这才是“处理兼容”的最佳方法。


    PIE.htc文件地址:https://github.com/JOSIE1988/htc
    如果对你有用,记得点赞哦~

    相关文章

      网友评论

        本文标题:处理兼容最好的方法就是“不处理兼容”

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