金三銀四，那瀏覽器相容你知多少？
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）預設高度（ie6ie7）
描述：在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,而是parentframe)，可以在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:沒有整理完整後續在這裡更新！