工作中兼容的处理

标签（空格分隔）： css的兼容   js的兼容

---

序

网页由前端三板斧组成，所以兼容也要从3个角度考虑，面试很反感问道：“你说说兼容问题？”相关的。圈里的人都懂，这个话题其实挺大的，你是让我从历史话题引起还是粗略一概而过，一概而过又怕你不满意，娓娓道来怕你烦。这个问题可大可小，而且前端人也最烦这个兼容，都按照W3C标准来不就得了嘛，非要只顾一己私利，毁了咱前端人吃饭碎觉打豆豆的时间。目前IE的使用量在10%+吧，所以兼容到这里还可以忍受。不管是优雅降级还是渐进增强，你自己根据站点相关信息做定夺吧。话锋回转，咱们开正题，从3个方面说兼容。

HTML

h5新增的语义化良好的99.99%都使用不了，不信到这家站点上查查

Paste_Image.png

注意IE即可：（没有别的意思哈。）毕竟曾经也是叱咤风云的老大哥，自己的标准自己定。老大就是标准嘛，只是现在此一时彼一时，大家都开始吐槽了。此刻你可以乖乖的用回h4的标签了，块级布局基本div，文本块使用h1-h6、p等，小块文字，装饰性的使用span，b、u、i就好。html部分的兼容是最好处理的，而且要是移动端，不需要注意语义问题的话，一路div谁还会管你呢。就不涉及兼容啦

CSS

CSS和JS的兼容处理的地方还是挺多的，前端人都吐槽的满大街都是，所以遇到了不要怕，网上资料一大把，所以面试官因为兼容的问题挂你，不去这家也罢了。这里理论就不多说，上一点代码块吧。

1 跨浏览器的透明

.transparent {    filter: alpha(opacity=50); /* IE */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera Google 等常规的*/}

2 跨浏览器的全屏背景

html { 
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;
}

3 跨浏览器的盒阴影

内部CSS3 盒阴影#mydiv { 
    -moz-box-shadow: inset 2px 0 4px #000;    -webkit-box-shadow: inset 2px 0 4px #000;    box-shadow: inset 2px 0 4px #000;
}
外部CSS3 盒阴影#mydiv { 
    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}

4 跨浏览器设置最小高度

#container {    min-height: 550px;    height: auto !important;    height: 550px;
}

5 IE6的PNG透明修复

.bg {    width:200px;    height:100px;    background: url(/img/logo.png) no-repeat;    _background:none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/logo.png',sizingMethod='crop');
}

小结：

以IE为主的主要有hack说法，其实就是人家自家的一种书写格式，找文档，照写就是了，剩下对于CSS3新增加的一些属性，有些需要加上各自的私有前缀，比如：

以谷歌苹果浏览器为准的-webkit-；以火狐为准的-moz-；以欧朋为准的-o-

添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性.

JavaScript

JavaScript的兼容点还是挺多的，遇到了，具体问题具体分析。这里举几个常见的。
1>  js获取非行内样式

            var oDiv = document.getElementById("div1");
            oDiv. = function () {                //obj.currentStyle.height IE
                //getComputedStyle(obj,null).height; 高级
                if (this.currentStyle) {
                    alert("ie:" + this.currentStyle.height);
                } else {
                    alert("高级:" + getComputedStyle(this, null).height);
                }
            };

2>  js封装的Ajax的第一步中

    //1 实例化一个请求对象
    if(window.XMLHttpRequest){        var xhr = new XMLHttpRequest();
    } else {        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

3> 获取文档的头部和左边的偏离位置--scroll存在浏览器兼容问题

/*
 *  获取文档的头部和左边的偏离位置
 *  使用: scroll().left  scroll().top
 */function scroll() {    if(window.pageXOffset != null){ // ie9+ 和 最新浏览器
        return {            left: window.pageXOffset,            top: window.pageYOffset
        }
    }else if(document.compatMode == 'CSS1Compat'){ // 标准浏览器
        return{            left: document.documentElement.scrollLeft,            top: document.documentElement.scrollTop
        }
    }else {        return{            left: document.body.scrollLeft,            top: document.body.scrollTop
        }
    }
}/*在js中如何判断当前浏览器正在以何种方式解析？
 document对象有个属性compatMode ,它有两个值：

 BackCompat 对应quirks mode
 CSS1Compat 对应strict mode *//*历史原因:

 当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) */

或者你还可以这么写，不要封装了：

 // 监听屏幕的滚动 ---> 使用时直接写在事件监听里
 window.onscroll = function () {        // 兼容的写法
    var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;    var scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
 }

4> js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度

//获取窗口可视范围的高度function getClientHeight(){  
    var clientHeight=0;  
    if(document.body.clientHeight&&document.documentElement.clientHeight){  
        var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }else{  
        var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }  
    return clientHeight;  
}

//获取窗口滚动条高度function getScrollTop(){  
    var scrollTop=0;  
    if(document.documentElement&&document.documentElement.scrollTop){  
        scrollTop=document.documentElement.scrollTop;  
    }else if(document.body){  
        scrollTop=document.body.scrollTop;  
    }  
    return scrollTop;  
}

//获取文档内容实际高度function getScrollHeight(){  
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);  
}

以上的调用使用方法：如下

window.onscroll=function(){    // 窗口可视范围的高度
    var height=getClientHeight(),        // 窗口滚动条高度
        theight=getScrollTop(),        // 窗口可视范围的高度
        rheight=getScrollHeight(),        // 滚动条距离底部的高度
        bheight=rheight-theight-height;        
    document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br />此时文档内容实际高度为：'+rheight+'<br />此时滚动条距离顶部的高度为：'+theight+'<br />此时滚动条距离底部的高度为：'+bheight;
}

类似的对应jq获取窗口的滚动距离，高度。

$(window).scroll(function(event) {      //获取浏览器的scrollTop值
       var scrollTop=$(window).scrollTop();     
      //浏览器的窗口高度
      var vHeight=$(window).height();    
      //盒子的的距离首个无定位的父级的距离--offset
      var offsetTop=$(".box2").offset().top;          console.log(vHeight+scrollTop-offsetTop);

    });

小结

对于原生js书写你的站点，需要兼容的地方肯定多，但是如果你采用js的库之一——jQuery的话，那就美滋滋了。大家都知道jQuery的1.9版本之前是兼容IE6/7/8，这样看来你就可以安心书写逻辑性代码喽，不要考虑烦人的兼容。但是你的项目很小不想启用jQuery，那么当然你又不想根据项目自己定制一份阉割版的jQuery，对不起，兼容还是自己做吧。

作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/01cf77228f1f