金三銀四，那瀏覽器兼容你知多少？

爲何會存在瀏覽器兼容問題？

首先要了解兼容，咱們先得了解一下爲何會存在瀏覽器兼容問題。在各大瀏覽器廠商的發展過程當中，它們對web的標準各有不一樣的實現，標準不一樣存在差別因此產生兼容性的問題。

瀏覽器內核

五大瀏覽器內核以及各內核表明做品：

• Trident: IE、Maxthon（遨遊）、Theworld（世界之窗）
• Gecko: Mozilla Firefox
• Webkit: Safari、Chrome
• Presto: Opera
• Blink: 由Google和Opera Softwase開發的瀏覽器排版引擎

一些概念

• CSS BUG

  Css樣式在各瀏覽器中解析不一致的狀況，或者說Css樣式在瀏覽器中不能正確顯示的問題稱爲CSS Bug

• CSS hack

  CSS中，hack是指一種兼容css在不一樣瀏覽器中正確顯示的技巧方法，由於他們都屬於我的對css代碼的非官方的修改，或非官方的補丁。有些人更喜歡使用patch（補丁）來描述這種行爲。

• Filter

  它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。本質上講，filter是一種用來過濾不一樣瀏覽器的hack類型。

過濾器(filter)

ps：過濾器可能這個說法有點不太正確，也能夠說是瀏覽器標識符！

• _下劃線過濾器

  當一個屬性前面增長一個下劃線後，因爲符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個聲明。可是ie6及更低版本瀏覽器會繼續解析。 語法：選擇器{_屬性：屬性值；} 此方法是區分ie6瀏覽器和其餘瀏覽器的方法

• ！important關鍵字過濾器

  它表示所附加的聲明具備最高優先級的意思，被瀏覽器優先顯示（ie6不識別此寫法） 語法：選擇符{屬性：屬性值！important；}

• *屬性過濾器

  當一個屬性前面加了*後，該屬性能被ie7及如下瀏覽器識別，其餘瀏覽器忽略該屬性的做用 語法：選擇器{*屬性：屬性值；}

• +屬性過濾器

  當一個屬性前面加了+後，該屬性能被ie7及如下瀏覽器識別，其餘瀏覽器忽略該屬性的做用 語法：選擇器{+屬性：屬性值；}

• *+屬性過濾器

  當一個屬性前面加了*+後，該屬性能被ie7瀏覽器識別，其餘瀏覽器忽略該屬性的做用 語法：選擇器{*+屬性：屬性值；}

• \9

  ie版本識別，其餘瀏覽器不識別 **語法：選擇符{屬性：屬性值\9;} **

• \0

  ie8及以上瀏覽器識別，其餘瀏覽器不識別 語法：選擇符{屬性：屬性值\0;}

• -moz-

  Firefox瀏覽器識別，其餘瀏覽器不識別

• -webkit-

  webkit內核瀏覽器識別，其餘瀏覽器不識別

• -o-

  Opera瀏覽器識別，其餘瀏覽器不識別

• -ms-

  ie瀏覽器識別，其餘瀏覽器不識別

常見的瀏覽器兼容問題以及解決方法

1）、圖片有邊框bug

描素:當圖片加在ie上會出現邊框

hack:給圖片加border：0；或者border：0 none；

2）圖片間隙

描素:div中的圖片間隙bug

在div中插入圖片時圖片將div下方撐大大約三像素

hack1：將與寫在一行上； hack2：將轉換爲塊級元素，給添加聲明display：block；

3）雙倍浮向（雙倍邊距）（只有ie6出現）

描素: 當ie6及更低版本瀏覽器在解析浮動元素時會錯誤的把浮動邊邊距（margin）加倍顯示。

hack：給浮動元素添加聲明：display:inline;

4）默認高度（ie6 ie7）

描述：在ie6及如下版本中，部分塊元素擁有默認高度（在16px左右）

hack1：給元素添加聲明：font-size：0； hack2:給元素添加聲明：overflow：hidden；

5）表單元素行高對齊不一致

描素：表單元素行高對齊方式不一致

hack：給表單元素添加聲明：float：left；

6）按鈕元素默認大小不一

描素：各瀏覽器中按鈕大小不一致

hack1：統一大小/（用a標記模擬） hack2:input外邊套一個標籤，在這個標籤裏寫按鈕的樣式，把input的邊框去掉 hack3:若是這個按鈕是一個圖片，直接把圖片做爲按鈕的背景圖便可。

7）百分比bug

描素：在ie6以及如下版本中解析百分比時會四捨五入方式計算從而致使50%加50%大於100%的狀況。（也會受系統影響）

hack：給右邊的浮動元素添加聲明

8）li列表的bug

（1）當父元素li有float：left；子元素a沒設置浮動的狀況下會出現垂直bug；

hack：給父元素li和子元素a都設置浮動

（2）當li中的a轉成block；而且有height 並有float的li沒設置浮動會出現階梯顯示

hack：同時給li加float

9）當前元素（父元素裏面的第一個子元素）與父元素沒有設置任何浮動的狀況下，設置margin-top後 會錯誤的把margin-top加在父元素上

hack1：給父元素添加聲明overflow：hidden；

hack1：:給父元素的子元素添加浮動

當兩個上下排列的元素，上元素有margin-bottom下面元素有margin-top：他們的中間間距不會疊加而是設置爲較大值

10）鼠標指針bug

描述：cursor屬性的hand屬性值只有ie9如下的瀏覽器識別，其餘瀏覽器不識別該聲明cursor屬性pointer屬性值ie6以上版本及其餘內核瀏覽器都識別該聲明

hack：如統一某元素鼠標指針形狀爲手型，應添加聲明cursor：pointer；

11）透明屬性

兼容其它瀏覽器寫法：opacity：value；（value取值0-1）

ie瀏覽器寫法：filter：alpha（opacity=value）；取值1-100（整數）

12）Html對象獲取問題

FireFox：document.getElementById("idName");

ie：document.idname 或者 document.getElementById("idName").

解決辦法：統一使用document.getElementById("idName");

12） 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.

13）window.location.href問題

描述:IE或者Firefox2.0.x下，可使用window.location或window.location.href;

Firefox1.5.x下,只能使用window.location。

解決方法：使用window.location來代替window.location.href。

14）frame問題

如下面的frame爲例：

<frame src="xxx.html" id="frameId" name="frameName" />
複製代碼

(1)訪問frame對象:

IE:使用window.frameId或者window.frameName來訪問這個frame對象, frameId和frameName能夠同名。

Firefox:只能使用window.frameName來訪問這個frame對象.

另外，在IE和Firefox中均可以使用window.document.getElementById("frameId")來訪問這個frame對象.

(2)切換frame內容:

在 IE和Firefox中均可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.

若是須要將frame中的參數傳回父窗口(注意不是opener,而是parent frame)，能夠在frame中使用parent來訪問父窗口。例如：parent.document.form1.filename.value="Aqing";

15）模態和非模態窗口問題

說明:IE下,能夠經過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.

解決方法：直接使用window.open(pageURL,name,parameters)方式打開新窗口。

若是須要將子窗口中的參數傳遞迴父窗口,能夠在子窗口中使用window.opener來訪問父窗口.

例如：

var parWin = window.opener;
parWin.document.getElementById("Aqing").value = "Aqing"; 
複製代碼

ps:沒有整理完整後續在這裏更新！