web前端浏览器兼容问题

浏览器兼容性

所谓浏览器的兼容性，就是在不同的浏览器效果对同一段代码有不同的解析；造成对页面显示效果不统一的情况

主流浏览器

浏览器内核是可以解析网页语言的代码；也就是渲染引擎；用来渲染显示网页。我已经使用运用我成熟，精湛，精通复制黏贴的技术为大家从百科拿来这段话，不用感谢我。

浏览器的内核：浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

几大主流浏览器	内核	特点
IE	trident	是微软在Mosaic代码的基础之上修改而来的，从版本11开始，初步支持WebGL技术。
Chrome	webkit/blink	高效稳定、兼容性好、且源码结构清晰、易于维护。
firefox	Gecko	代码完全公开；Gecko也是一个跨平台内核
Opera	presto	渲染速度的优化达到了极致的动态内核，然而代价是牺牲了网页的兼容性。
Safari	webkit	Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来

解决兼容问题

开始战火点燃，来解决前端开发的一些兼容问题

JS API

获取CSS样式getComputedStyle

<div id="box"></div>
<script>
    var box = document.getElementById('box');
    console.log(window.getComputedStyle(box,null))
</script>

1. 标准浏览器（谷歌，火狐，ie9以上）支持该属性；而ie8以下不支持该属性
   
2. Element.currentStyle 是一个与 window.getComputedStyle方法功能相同的属性。这个属性实现在旧版本的IE浏览器中(记得getComputedStyle要挂载到window进行判断，否则ie8以下依旧不支持)

    function getStyle(ele,attr) {
   
        if(window.getComputedStyle){
   
            return getComputedStyle(ele,null)[attr];
        }else{
   
            return ele.currentStyle[attr];
        }
    }

节点

获取子节点childNodes

<div id="box"><p>111111111</p></div>
....
console.log(box.childNodes)

1. 标准浏览器： childNodes 获取到的的内容包括空白节点和元素节点
   
2. 非标准浏览器下： 只包含元素节点
   
3. 使用children解决其兼容性（该方法没有兼容性问题）

console.log(box.children[0])

兄弟节点和子节点

1. 通过firstChild和firstElementChild来说明
2. firstChild在标准会打印文本
3. firstElementChild在非标准浏览器打印的是undefined，在标准浏览器打印子节点

function getFirstNode(ele){
   
    var node = ele.firstElementChild || ele.firstChild;
    return node;
}
function getLastNode(ele){
   
    return ele.lastElementChild || ele.lastChild;
}
function getNextNode(ele){
   
    return ele.nextElementSibling || ele.nextSibling;
}
function getPrevNode(ele){
   
    return ele.previousElementSibling || ele