瀏覽器的兼容性以及寫法
第一個 清除浮動的兼容性
第二個 透明度的兼容寫法
第三個 js獲取節點的兼容寫法
第四個 獲取計算機計算的所有屬性
第五個 獲取元素子節點childNodes 這個屬性有兼容性
第六個 動態創建節點，元素沒有子節點，Ie低版本會讀取不到，而標准瀏覽器會。
第七個 獲取瀏覽器可見區的高度 寬度 body
第八個 解決Css3中的兼容性
第九個 Event的兼容性
第十個 事件綁定的兼容性寫法
第十一個 Mouseevent有兼容性
第十二個 Event對象的兼容性
第十三個 事件源（點擊那個元素，那個元素就是事件源）兼容性
第十四個 阻止事件冒泡兼容性
第十五個 阻止事件默認行為兼容性
清楚浮動在低版本瀏覽器不行，需要處理兼容性加一個 .clearfix{ *zoom：1；}
為什么加了 .clearfix{*zoom：1;} 它是專門針對Ie 6/7低版本的，如果沒有加 .clearfix{*zoom：1；}如果是ie 6/7你給這個元素加了clearfix不起作用，只有加它再給這個父級加 clearfix 才有效果。它是解決iE清除浮動在低版本瀏覽器兼容性
第二個 透明度的兼容寫法
rgb 和rgba 和oopacity
rgb是顏色的表達方法值是 0-255
如 background：rgb（12，13，14）
opacity 表示透明度值是0-1；
rgba（）人是red0-255 g是green 值是0-255 b是blue值是0-255 a是opacity值是 0-1
但是iE低版本不支持。、
加一個樣式 它是iE低版本透明的兼容寫法
filter：alpha(opacity=50)
rgb 和opacity與rgba的區別?
前者內容也跟着透明，后者內容不跟着透明
第三個 js獲取節點的兼容寫法
Document.body 獲取的是文檔中的body標簽
Document.documentElement 獲取的是文檔中的根節點
Document.body.clentWidth
Document.documentElement.ctentWidth
這是谷歌的
二者獲取width的值不一樣差16px，怎樣讓他們一樣。
iE瀏覽器低版本不支持 document.documentElement
兼容性寫法
var w=document.documentElement.clientwidth||document.body.clientwidth
獲取瀏覽器的可見長度
如何在js中獲取 css樣式
window.getcomputedstyle()獲取經過計算機的所有屬性，
就是只要渲染到頁面的都是經過計算的。
get.computedstyle()第一個參數是當前元素，第二個一般我們寫null
並且這個方法是只讀的，
Ie6-8 不支持這個用法 Ie的是用 currentStyle
可以用 currentStyle
總結
js解決兼容的方法
1.用||
var dd=document.documentElement.clienWidth||document.body.clicentWidth
2.if()esle{}
if(window.getComputedStyle){
csss=window.getComputedStyle(aa,null)
}else{
csss=aa.currentStyle
}
console.log(csss)
第五個 獲取元素子節點childNodes 這個屬性有兼容性
元素.childNodes 這個屬性有兼容性 標准瀏覽器會獲取到文本節點。
而低版本瀏覽器不會。索引建議使用 children 這個屬性
左邊是Ie低版本瀏覽器 右邊是谷歌標准瀏覽器
使用children之后 統一文本節點
兼容寫法：
var list=document.getElementById("list")
var fist=list.firstElementChild||list.firstChild
第六個 動態創建節點，元素沒有子節點，Ie低版本會讀取不
到，而標准瀏覽器會。
如果list沒有子節點ie低版本會讀取不到，而標准瀏覽器會
兼容性。
元素沒有子節點，ie低版本會讀取不到，而標准瀏覽器會。
因為標准瀏覽器會把文本節點當作子節點，而ie6-8不會。
第七個 獲取瀏覽器可見區的高度 寬度 body
兼容性寫法
Var w=document.documentElement.clientWidth||document.body.clientWidth
獲取瀏覽器可見區的寬度
獲取瀏覽器可見區的高度
Var w=document.documentElement.clientHeight||document.body.clientHeight
瀏覽器滾動條卷走的高度
Document.body.scrollTop||document.documentElement.scrollTop
第八個 解決Css3中的兼容性
chrome（谷歌）的前綴-webkit-
firefox（火狐）的前綴-moz-
ie的前綴 -ms-
poera（歐朋）的前綴-o-
國內的瀏覽器的內核都是谷歌
第九個 Event的兼容性
在chrome（谷歌瀏覽器）event是undefined在ie下是null 火狐下會報錯
第十個 事件綁定的兼容性寫法
標准瀏覽器用： div.addEventListener()
ie低版本用：div.attachEvent()
第十一個 Mouseevent有兼容性
標准瀏覽器可以直接讀取，但ie不行
解決辦法：
第十二個 Event對象的兼容性
clientX和clientY 是鼠標到瀏覽器窗口左上角的距離坐標。
pageX和pageY是鼠標到頁面左上角的距離坐標，但是ie低版本沒有。
在ie下怎么算pagerY的值加上scrolTop：clientY+scrollTop
第十三個 事件源（點擊那個元素，那個元素就是事件源）兼容性
標准瀏覽器的事件源是 ev.target
在ie6-8沒有這個屬性 但是ie有ev.srcElement
第十四個 阻止事件冒泡兼容性
1.event.cancelBubble=true（現在ie瀏覽器版本升級了，用這一個就行了）
2.event.stopPropagation?event.stopPropagation():event.cancelBubble=true（老版ie瀏覽器兼容性寫法）
第十五個 阻止事件默認行為兼容性
比如 a的href
href為空 會自動刷新頁面
href為# 會錨點跳轉
href為 javascript:; 阻止默認行為的發生
兼容性寫法：
Event.preventDefault?Event.preventDefault():event.returnValue=false
作者：晉飛翔
手機號(微信同步)：17812718961
希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收獲 不喜勿噴 如有建議 多多提議 謝謝！！！