為什麼會存在瀏覽器相容問題？
首先要了解相容，我們先得了解一下為什麼會存在瀏覽器相容問題。在各大瀏覽器廠商的發展過程中，它們對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
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:沒有整理完整後續在這裡更新！