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-
4、document获取根节点的兼容性(Ie6不支持document.documentElement)
var w=document.documentElement.clientWidth||document.body.clientWidth
5、各种国外浏览器在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,不捕获单冒泡