*css兼容性处理
1、清除浮动的兼容性(低版本的浏览器不兼容问题)
.clearfix:after{
content:"";
clear:both;
display:block;
visibility:hidden;
height:0;
}
.clear{
*zoom:1;
}
2、透明度的兼容性
opacity:0.3;
filter:alpha(opacity=30);
3、各种国外浏览器在CSS3中的兼容问题
国内的浏览器的内核都是谷歌
Chrome的前缀-webkit-
Firefox的前缀-moz-
IE的前缀-ms-
Opera的前缀-o-
*JS兼容性处理
1、document获取根节点的兼容性(Ie6不支持document.documentElement)
var w=document.documentElement.clientWidth||document.body.clientWidth
获取第一个子节点的兼容写法
var list=document.getElementById("list")
var first=list.firstElementChild||list.firstChild
获取最后一个子节点 lastELementChild||lastChild
获取上一个兄弟节点 previousSibling||previousElementChild
获取下一个兄弟节点nextSibling||nextElementSibling
2、if()else()
例一:获取window下所有经过计算机计算的属性
if(window.getComputedStyle){
csss.window.computedStyle(当前元素,null)
}else{
csss.aa.currentStyle
}console.log(csss)
例二:获取元素的子节点并向后添加一个元素
if(父元素.children[0]){
父元素.insertBefore(子元素,在谁前面加)
}else{
父元素.appendChild(子元素)
}
3、try{}catch(err){}
例:获取window下所有经过计算机计算的属性
var csss;
try{
csss=window.getComputedStyle(aa,null)
}catch(e){
csss=aa.currentStyle
}
console.log(csss)
4、获取浏览器的body属性的兼容性
var body=document.body||document.documentElement;
5、获取函数中的事件对象event的兼容性
标准:event是undefined;
非标准:null;
兼容:var e=e||window.event;
6、时间绑定的第二种写法
标准浏览器用:addEventListener()
非标准用:attachEvent()
addEventListener(参数1,参数2,参数3)
参数1:事件名,并且不带"on"
参数2:事件函数
参数3:布尔值,代表捕获不捕获,默认值是false,不捕获单冒泡
7、event对象的兼容性
clientX和clientY是鼠标到浏览器窗口的左上角的距离坐标
pageX和pageY是鼠标到网页左上角距离坐标,但是IE低版本没有这个属性,
那么IE该如何计算pageY的值?
clientY+scrollTop
8、获取事件源(e.target)的兼容性
标准下:e.target
非标准:e.srcElement
兼容性写法:e.target||e.srcElement
9、阻止事件冒泡的兼容性
标准和非标准都兼容的:event.cancelBubble=true
标准:event.stopPropagation()
兼容这两者:event.stopPropagation?event.stopPropagation():event.cancelBubble=true
10、阻止事件的默认行为的兼容性
例如:a
a.href="javascript:;"取消刷新
标准和非标准都兼容取消刷新:event.preventDefault?event.preventDefault():event.returnValue=false