1.清除浮动的兼容性:
清除浮动在低版本浏览器不可以使用,需要处理兼容性加一个
.clearfix{*zoom:1;}
2.rgb 和rgba和opacity的兼容性:
rgb 和 opacity在ie低版本中不支持,需要加一个filter: alpha(opacity=50);
3.解决css3中的兼容性
chrome(谷歌)的前缀-webkit-
firefox(火狐)的前缀-moz-
ie的前缀 -ms-
poera(欧朋)的前缀-o-
国内的浏览器的内核都是谷歌
4. js解决兼容性
1.ie6不支持document.documentElement,
兼容写法:var w=document.documentElement.clientWidth||document.body.clientWidth
获取浏览器可见去的宽度
2.ie6-8不支持getComputedStyle()这个方法,ie的是用currentStyle
Js解决兼容的方法
3.元素.childNodes 这个属性有兼容性 标准浏览器会获取到文本节点
而低版本浏览器不会。所以建议使用children这个属性。
4.标准下 元素.firstElementChild
非标准下 元素.firstChild
兼容下写法
var list=document.getElementById("list")
var fist=list.firstElementChild||list.firstChild
5.兼容性
元素没有子节点,ie低版本不会读取不到,而标准浏览器会
因为标准浏览器会把文本节点当作子节点,而ie6-8不会
. js解决兼容的方法
- ||
Var dd=document.documentElement.clientWidth||document.body.clientWidth
- if()else{}
if(window.getComputedStyle){
csss=window.getComputedStyle(aa,null)
}else{
csss=aa.currentStyle
}
console.log(csss)
6.获取浏览器的body属性是有兼容性的
var dd=document.body||document.documentElement
获取body的整个文档的高
document.body.scrollHeight||documentElement.scrollHeight
获取浏览器一屏幕的高(浏览器的可视区)
document.body.clientHeight||document.documentElement.clientHeight
7.event的兼容性
在Chrome下event是undefined在ie低版本下是null,火狐下会报错
document.onclick=function(e){
var e=e||window.event
}
8.事件绑定的兼容性
标准浏览器用addEventListener()这个方法
ie低版本用attachEvent()这个方法
9.mouseevent有兼容性
标准浏览器可以直接读取,但是ie不行
解决办法
10.event对象的兼容性
clientX和clientY是浏览器窗口左上角的距离坐标
pageX和pageY是鼠标到网页左上角的距离坐标,但是ie低版本没有这个属性
在ie下用clientY+scrollTop算pageY的值
11.事件源 点击那个元素,那个元素就是事件源
标准浏览器的事件源是ev.target
ie6-8没有这个属性 但是ie有ev.srcElement
12.阻止事件冒泡兼容性
1.event.cancelBuble=true
2.event.stopPropagation?event.stopPropagation():event.cancelBubble=true
13.阻止事件默认行为兼容性
比如 a的href
Href为空 会自动刷新页面
Href为# 锚点跳转
Href为javascript:;阻止默认行为的发生
Event.preventDefault?Event.preventDefault():event.returnValue=false