作为一名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;
})