chrome-Firefox-IE浏览器兼容总结

Posted 2020-09-21

作为一名WEB前端程序员,相信每个人对浏览器的兼容都"情有独钟",下面就一些常用的浏览器的兼容列举一二。

一、块级元素（block）一般不转化为inline-block,其实是因为浏览器的兼容问题，IE8以下的浏览器不     支持块级元素转化为行内块元素(可以使用浮动)。

二.获取元素样式:
1.oDiv.style.background:
　　获取到的是行内样式的属性
2.获取显示的样式:
　　标准浏览器(IE9以下是不支持):
　　　　getComputedStyle(标签元素,false).属性名
　　IE9以下获取内联样式:
　　　　标签元素.currentStyle.属性名

　　做浏览器的兼容:
　　if (oDiv.currentStyle) {
　　　　//在IE9以下
　　　　oDiv.currentStyle.width;
　　} else {
　　　　//标准浏览器
　　　　getComputedStyle(oDiv,false).width;
　　}

3.oDiv.offset.width=100;注意：不带‘px‘，上面两个获取的带‘px‘

三.获取兄弟节点
　　nextSibling,previousSibling
　　在高级和IE9以上的浏览器里面,兄弟节点会获取到空格,在IE8以下,才能获取到我们想要的元素节点

　　previousElementSibling,nextElementSibling
　　在高级和IE9以上的浏览器里面,兄弟节点会获取到对应的元素,在IE8以下,不能获取到我们想要的元素节点

　　var oP1 = oP.previousElementSibling || oP.previousSibling;

四.获取第一个或最后的兄弟节点
　　获取节点,获取第一个节点,获取最后一个节点
　　父节点.firstChild;
　　父节点.lastChild;
　　1.兼容所有的浏览器
　　　　oUl.firstElementChild || oUl.firstChild
　　2.兼容所有的浏览器
　　　　oUl.lastElementChild || oUl.lastChild

五.向上滚动的距离:
　　1.在谷歌里面:
　　　　document.body.scrollTop
　　2.在火狐、IE里面:
　　　　document.documentElement.scrollTop
　　3.兼容所有浏览器:
　　　　var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
　　　　var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

六、事件绑定的兼容
　　if (obj.addEventListener) {
　　　　//在高级浏览器
　　　　obj.addEventListener(type,fn,false);
　　} else {
　　　　obj.attachEvent(‘on‘+type,fn)
　　}
　　事件移除的兼容
　　if (obj.removeEventListener) {
　　　　obj.removeEventListener(type,fn,false);
　　} else {
　　　　obj.detachEvent(‘on‘+type,fn);
　　}

七、阻止默认事件的兼容
　　function(evt) {
　　　　var oEvent = evt || event;
　　　　oEvent.preventDefault && oEvent.preventDefault();
　　　　return false;
　　}

八、事件委托兼容
　　srcElement: 获取到事件真正作用的那个元素 (不兼容Firefox,专门用来做IE浏览器的兼容)
　　target: 获取到事件真正作用的那个元素 （兼容高级浏览器）
　　var oLi = oEvent.srcElement || oEvent.target;

　　addEvent(‘oUl‘,‘click‘,function(evt){

　　　　var oEvent=evt||event;

　　　　var oLi=oEvent.srcElement||oEvent.target;

　　})