一、什么是瀏覽器兼容性
瀏覽器兼容性問題又被稱為網(wǎng)頁兼容性或網(wǎng)站兼容性問題，指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網(wǎng)頁間的兼容問題。在網(wǎng)站的設計和制作中，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發(fā)和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。
瀏覽器兼容問題包括HTML標簽兼容、css兼容和JS兼容
二、HTML標簽兼容
1、? ?問題：對于H5新增的標簽和表單類型，pc低版本的瀏覽器不兼容
? ??????解決辦法：pc端布局盡量不要使用新增標簽
2、? ?問題：H5新增的多媒體標簽兼容問題
? ? ? ? 解決辦法：?一般提供ogg和mp3格式，就可以支持所有主流瀏覽器了
二、css兼容
1、?IE6默認高度，當元素高于18px，無法正常顯示正確高度
?解決辦法：設置? font-size：0；或? ?overflow：hidden；
2、雙倍浮向：IE6浮動時橫向margin加倍
產生因素：塊屬性、float、有橫向margin。
解決方法：display：inline
3、?在各個瀏覽器下img有空隙
原因是：回車。
解決方法: 讓圖片浮動 或者 display：block
4、表單元素在各瀏覽器中 行高不一致、對齊方式不一致
解決辦法：給表單元素添加 float
5、按鈕默認樣式不一致
解決辦法：統(tǒng)一樣式
6、透明
? filter：alpha（opacity=80）；/*ie支持該屬性*/
? opacity：0.8；/*支持css3的瀏覽器*/
7、li中有a且a的display：block或 float 時，行高會不一致
解決辦法：給a設為display：inline/inline-block? 或者 給 li 添加浮動并設置寬
8、IE6中 li 有浮動，li中有a，a有樣式display：block且有高度時，li 會獨占一行呈階梯狀展示
解決辦法：不給a設置高度? 或 給a添加浮動
9、父元素中有塊元素，給子元素添加margin-top時，父元素也掉下來
解決辦法：給父元素添加樣式：overflow：hidden? 或? 加邊框；或給子元素添加浮動
10、火狐不識別background-position-y 或background-position-x;
11、兩個塊元素，豎向的margin值不增加，會重疊，其間距為最大margin值。
12、優(yōu)先級：被!important 注明的css屬性具有最高優(yōu)先級(.abc{color:red !important;})。但在ie6中!important具有一個bug:在同一組css屬性中，!important不起作用。
13、li之間有間距
解決方法：li 設置vertical-align:middle;
14、3像素問題：ie6下，當浮動元素與流動元素并列顯示時，他們之間會存在三像素問題。
? ?解決方法：用hack技術， 例如：所有瀏覽器通用 height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6專用_height:100px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie7專用*+height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6/ie7共用*height:100px;
10、過濾器：
? ??* ? ? ? ?，?ie6,ie7可以識別；
? ??_和-?， ?ie6可以識別；
? ??!important ?,表示高優(yōu)先級，ie7及以上，firefox都支持，ie6認識帶!important的樣式屬性，但不認識!important的優(yōu)先級；
-webkit- ，針對safari，chrome瀏覽器的內核CSS寫法
-moz-，針對firefox瀏覽器的內核CSS寫法
-ms-，針對ie內核的CSS寫法
-o-，針對Opera內核的CSS寫法
三、JS兼容
1、const 問題
說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;
IE下,只能使用var關鍵字來定義常量.
解決方法：統(tǒng)一使用var關鍵字來定義常量.
2、?event.srcElement問題
問題說明：IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。
解決方法：使用srcObj =event.srcElement ?event.srcElement : event.target;
3、事件綁定
IE：dom.attachEvent();
其他瀏覽器：dom.addEventListener()；
4、操作 tr 對象
在ie9以下，不能操作tr的innerHTML
5、FireFox中類似obj.style.height =imgObj.height的語句無效。
6、event.x與event.y問題
說明:IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
解決方法：使用mX(mX? ?=? ?event.x? ??? ?event.x? ?:? ?event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.?
7、window.location.href問題
說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.?
解決方法：使用window.location來代替window.location.href.
8、ajax請求的問題
IE:ActiveXObject
其他：xmlHttpReuest
