摘要：前言自己找了各種兼容問題，我把它們給歸納在一起了。而兼容就是一種辦法，能讓你在一個里面獨立的寫支持不同瀏覽器的樣式。解決方法統一用來取得為的對象。八問題問題說明只能在下運行，而不能在下運行，這是因為的只能在事件發生的現場使用。

前言

自己找了各種兼容問題，我把它們給歸納在一起了。希望大家不要見怪！

什么是瀏覽器兼容：當我們使用不同的瀏覽器（Firefox IE7 IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，有的顯示出來正常，有的顯示出來不正常，我們在編寫CSS的時候會很惱火，修復了這個瀏覽器的問題，結果另外一個瀏覽器卻出了新問題。而兼容就是一種辦法，能讓你在一個CSS里面獨立的寫支持不同瀏覽器的樣式。這下就和諧了。呵呵！

css兼容技巧 1. 問題一

為什么FF 下文本無法撐開容器的高度？

標準瀏覽器中固定高度值的容器是不會象IE6 里那樣被撐開的, 那我又想固定高度，又想能被撐開需要怎樣設置呢？

解決方法： 去掉height 設置min-height:200px; 這里為了照顧不認識min-height 的IE6 可以這樣定義：

div { 
   height:auto!important; 
   height:200px; 
   min-height:200px; 
 }
 兼容代碼:兼容最推薦的模式。
/* FF */
.submitbutton {
   float:left;
   width: 40px;
   height: 57px;
   margin-top: 24px;
   margin-right: 12px;
 }
/* IE6 */
*html .submitbutton {
   margin-top: 21px;
 }
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}

2.各種樣式表的屬性的兼容

解決方法：IE用-ms-，Firefox用-moz-，Opera用-o-，Safari、多款手機瀏覽器用-webkit-

比如：CSS里設定陰影的屬性

/* 原型是 */
box-shadow: 1px 1px 3px #999;
/* 要補上兼容代碼*/
-moz-box-shadow: 1px 1px 3px #999; /* Firefox */
-webkit-box-shadow: 1px 1px 3px #999; /* Safari*/
-o-box-shadow: 1px 1px 3px #999; /* Opera */
-ms-box-shadow: 1px 1px 3px #999; /* IE */

3.居中問題

垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vetical-align: middle.( 注意內容不 要換行.)

水平居中. margin: 0 auto;(當然不是萬能)

提醒：作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應

js兼容技巧 一、document.formName.item(”itemName”) 問題

問題說明：

IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements["elementName"]；
Firefox 下，只能使用document.formName.elements["elementName"]。

解決方法：統一使用document.formName.elements["elementName"]。

二、集合類對象問題

問題說明：

IE下，可以使用 () 或 [] 獲取集合類對象；Firefox下，只能使用 [ ]獲取集合類對象。

解決方法：統一使用 [] 獲取集合類對象。

三、自定義屬性問題

問題說明：
IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；
Firefox下，只能使用 getAttribute() 獲取自定義屬性。

解決方法：統一通過 getAttribute() 獲取自定義屬性。

四、eval(”idName”)問題

問題說明：
IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 來取得 id 為 idName 的HTML對象；
Firefox下，只能使用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。

解決方法：統一用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。

五、變量名與某HTML對象ID相同的問題

問題說明：

IE下，HTML對象的ID可以作為 document 的下屬對象變量名直接使用，
Firefox下則不能；Firefox下，可以使 用與HTML對象ID相同的變量名，IE下則不能。

解決方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML對象ID相 同的變量名，以減少錯誤；在聲明變量時，一律加上var關鍵字，以避免歧義。

六、const問題

問題說明：

Firefox下，可以使用const關鍵字或var關鍵字來定義常量；
IE下，只能使用var關鍵字來定義常量。

解決方法：統一使用var關鍵字來定義常量。

七、input.type屬性問題

問題說明：

IE下 input.type 屬性為只讀；但是Firefox下 input.type 屬性為讀寫。

解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input，然后在同樣的位置再插入一 個新的input元素。

八、window.event問題

問題說明：

window.event 只能在IE下運行，而不能在Firefox下運行，這是因為Firefox的event只能在事件發生的現場使用。

解決方法：

在事件發生的函數上加上event參數，在函數體內(假設形參為evt)
使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：