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

前言

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

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

css兼容技巧 1. 問題一

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

標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會象IE6 里那樣被撐開的, 那我又想固定高度，又想能被撐開需要怎樣設(shè)置呢？

解決方法： 去掉height 設(shè)置min-height:200px; 這里為了照顧不認(rèn)識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-，F(xiàn)irefox用-moz-，Opera用-o-，Safari、多款手機瀏覽器用-webkit-

比如：CSS里設(shè)定陰影的屬性

/* 原型是 */
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 設(shè)置為 當(dāng)前 div 相同的高度, 再通過 vetical-align: middle.( 注意內(nèi)容不 要換行.)

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

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

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

問題說明：

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

解決方法：統(tǒng)一使用document.formName.elements["elementName"]。

二、集合類對象問題

問題說明：

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

解決方法：統(tǒng)一使用 [] 獲取集合類對象。

三、自定義屬性問題

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

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

四、eval(”idName”)問題

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

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

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

問題說明：

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

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

六、const問題

問題說明：

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

解決方法：統(tǒng)一使用var關(guān)鍵字來定義常量。

七、input.type屬性問題

問題說明：

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

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

八、window.event問題

問題說明：

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

解決方法：

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