1. css中的兼容性
浏览器和浏览器之间是由差距的,这个差距是由浏览器自身的内核决定的。
每个浏览器都有自己的前缀,主要解决css3中的兼容问题。
Chrome(谷歌) 的前缀 -webkit-
Firefox(火狐) 的前缀 -moz-
Ie 的前缀 -ms-
Opera(欧朋) 的前缀 -o-
国内的浏览器的内核是谷歌
2.js中的兼容性
DOM获取兼容
Document.body 获取的是文档中的body标签
Document.documentElement 获取的是文档中根节点
但Ie6不支持document.documentElement,所以要兼容
兼容性写法
Var w=document.documentElement.clientWidth||document.body.clientWidth(获取浏览器可见区的宽度)
获取浏览器的body属性是有兼容的
Var dd=document.body||document.documentElement
scrollTop和scrollLeft的最小值是0
获取body的整个文档的高
document.body.scrollHeight||document.documentElement.scrollHeight
获取浏览器一屏幕的高(浏览器的可视区)
Document.body.clientHeight||document.documentElement.clientHeight
事件绑定的写法
1.div.onclick=function(){} DOM0级事件绑定
2.div.addEventListener()或div.attachEvent() DOM2级事件绑定
Mouseevent有兼容性
标准浏览器可以直接读取,但是ie不行
解决办法
Event对象的兼容性
clientX和clientY是鼠标到浏览器窗口左上角的距离坐标
pageX和pageY是鼠标到网页左上角的距离坐标,但是ie低版本没有这个属性
在ie下怎么算pageY的值 用clientY+scrollTop
事件源 点击哪个元素,哪个元素就是事件源
标准浏览器的事件源是ev.target
Ie6-8没有这个属性 但是ie有ev.srcElement
阻止事件冒泡兼容性
1.event.cancelBubble=true
2.event.stopPropagation?event.stopPropagation():event.cancelBubble=true
阻止事件默认行为兼容性
比如 a的href
Href为空 会自动刷新页面
Href为# 锚点跳转
Href为javascript:;阻止默认行为的发生
Event.preventDefault?Event.preventDefault():event.returnValue=false