Javascript和CSS瀏覽器兼容總結

精品word文檔值得下載值得擁有這是我總結多年的一個小文檔，主要內容是Javascript和CSS瀏覽器兼容總結，最近看見有人咨詢?yōu)g覽器兼容的問題，就貢獻出來。上面定義的Price在函數(shù)

并不一定全，有的也可能不準確，比如新出的IE8、Chrome等都沒有太多涉及，雖然最近做的一些項目也兼容了IE8、Chrome等，但都沒來的及總結進去，后來就忘了…汗。大家一起慢慢完善吧。

javascript部分

1.document.form.item問題

問題：

代碼中存在document.formName.item(“itemName”)這樣的語句，不能在FF下運行

解決方法：

改用document.formName.elements["elementName"]

2.集合類對象問題

問題：

代碼中許多集合類對象取用時使用()，IE能接受，F(xiàn)F不能

解決方法：

改用[]作為下標運算，例：

document.getElementsByName(“inputName”)(1)改為document.getElementsByName(“inputName”)[1]

3.window.event

問題：

使用window.event無法在FF上運行

解決方法：

FF的event只能在事件發(fā)生的現(xiàn)場使用，此問題暫無法解決?？梢园裡vent傳到函數(shù)里變通解決：

onMouseMove=“functionName(event)”

functionfunctionName(e){

e=e||window.event;

……

}

4.HTML對象的id作為對象名的問題

問題：

在IE中，HTML對象的ID可以作為document的下屬對象變量名直接使用，在FF中不能

解決方法：

使用對象變量時全部用標準的getElementById(“idName”)

5.用idName字符串取得對象的問題

問題：

在IE中，利用eval(“idName”)可以取得id為idName的HTML對象，在FF中不能

解決方法：

用getElementById(“idName”)代替eval(“idName”)

6.變量名與某HTML對象id相同的問題

問題：

在FF中，因為對象id不作為HTML對象的名稱，所以可以使用與HTML對象id相同的變量名，IE中不能

解決方法：

在聲明變量時，一律加上var，以避免歧義，這樣在IE中亦可正常運行

最好不要取與HTML對象id相同的變量名，以減少錯誤

7.event.x與event.y問題

問題：

在IE中，event對象有x,y屬性，F(xiàn)F中沒有

解決方法：

在FF中，與event.x等效的是event.pageX，但event.pageXIE中沒有

故采用event.clientX代替event.x，在IE中也有這個變量

event.clientX與event.pageX有微妙的差別，就是滾動條

要完全一樣，可以這樣：

mX=event.x?event.x:event.pageX;

然后用mX代替event.x

8.關于frame

問題：

在IE中可以用window.testFrame取得該frame，F(xiàn)F中不行

解決方法：

window.top.document.getElementById(“testFrame”).src=‘xx.htm’

window.top.frameName.location=‘xx.htm’

9.取得元素的屬性

在FF中，自己定義的屬性必須getAttribute()取得

10.在FF中沒有parentElement，parement.children而用parentNode，parentNode.childNodes

問題：

childNodes的下標的含義在IE和FF中不同，F(xiàn)F的childNodes中會插入空白文本節(jié)點

解決方法：

可以通過node.getElementsByTagName()來回避這個問題

問題：

當html中節(jié)點缺失時，IE和FF對parentNode的解釋不同，例如：

<form>

<table>

<input/>

</table>

</form>

FF中input.parentNode的值為form，而IE中input.parentNode的值為空節(jié)點

問題：

FF中節(jié)點自己沒有removeNode方法

解決方法：

必須使用如下方法node.parentNode.removeChild(node)

11.const問題

問題：

在IE中不能使用const關鍵字

解決方法：

以var代替

12.body對象

FF的body在body標簽沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在

這會產生在IE下，文檔沒有載入完時，在body上appendChild會出現(xiàn)空白頁面的問題

解決方法：

一切在body上插入節(jié)點的動作，全部在onload后進行

13.urlencoding

問題：

一般FF無法識別js中的&

解決方法：

在js中如果書寫url就直接寫&不要寫&

14.nodeName和tagName問題

問題：

在FF中，所有節(jié)點均有nodeName值，但textNode沒有tagName值，在IE中，nodeName的使用有問題

解決方法：

使用tagName，但應檢測其是否為空

15.元素屬性

IE下input.type屬性為只讀，但是FF下可以修改

16.document.getElementsByName()和document.all[name]的問題

問題：

在IE中，getElementsByName()、document.all[name]均不能用來取得div元素

是否還有其它不能取的元素還不知道（這個問題還有爭議，還在研究中）

17.調用子框架或者其它框架中的元素的問題

框架問題\o"繁體字網"繁體字網的前段設計師曾做過詳細的講解，簡單來說，在IE中，可以用如下方法來取得子元素中的值

document.getElementById(“frameName”).(document.)elementName

window.frames["frameName"].elementName

在FF中則需要改成如下形式來執(zhí)行，與IE兼容：

window.frames["frameName"].contentWindow.document.elementName

window.frames["frameName"].document.elementName

18.對象寬高賦值問題

問題：

FireFox中類似obj.style.height=imgObj.height的語句無效

解決方法：

統(tǒng)一使用obj.style.height=imgObj.height+“px”;

19.innerText的問題

問題：

innerText在IE中能正常工作，但是innerText在FireFox中卻不行

解決方法：

在非IE瀏覽器中使用textContent代替innerText

20.event.srcElement和event.toElement問題

問題：

IE下，even對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性

解決方法：

varsource=e.target||e.srcElement;

vartarget=e.relatedTarget||e.toElement;

21.禁止選取網頁內容

問題：

FF需要用CSS禁止，IE用JS禁止

解決方法：

IE:obj.onselectstart=function(){returnfalse;}

FF:-moz-user-select:none;

22.捕獲事件

問題：

FF沒有setCapture()、releaseCapture()方法

解決方法：

IE:

obj.setCapture();

obj.releaseCapture();

FF:

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

if(!window.captureEvents){

o.setCapture();

}else{

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

if(!window.captureEvents){

o.releaseCapture();

}else{

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

CSS部分

div類

1.居中問題

div里的內容，IE默認為居中，而FF默認為左對齊

可以嘗試增加代碼margin:auto

2.高度問題

兩上下排列或嵌套的div，上面的div設置高度(height)，如果div里的實際內容大于所設高度，在FF中會出現(xiàn)兩個div重疊的現(xiàn)象；但在IE中，下面的div會自動給上面的div讓出空間

所以為避免出現(xiàn)層的重疊，高度一定要控制恰當，或者干脆不寫高度，讓他自動調節(jié)，比較好的方法是height:100%;

但當這個div里面一級的元素都float了的時候，則需要在div塊的最后，閉和前加一個沉底的空div，對應CSS是：

.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3.clear:both;

不想受到float浮動的，就在div中寫入clear:both;

4.IE浮動margin產生的雙倍距離

#box{

float:left;

width:100px;

margin:000100px;//這種情況之下IE會產生200px的距離

display:inline;//使浮動忽略

}

5.padding問題

FF設置padding后，div會增加height和width，但IE不會（*標準的XHTML1.0定義dtd好像一致了）

高度控制恰當，或嘗試使用height:100%;

寬度減少使用padding

但根據(jù)實際經驗，一般FF和IE的padding不會有太大區(qū)別，div的實際寬=width+padding，所以div寫全width和padding，width用實際想要的寬減去padding定義

6.div嵌套時y軸上padding和marign的問題

FF里y軸上子div到父div的距離為父padding+子marign

IE里y軸上子div到父div的距離為父padding和子marign里大的一個

FF里y軸上父padding=0且border=0時，子div到父div的距離為0，子marign作用到父div外面

7.padding，marign，height，width的傻瓜式解決技巧

注意是技巧，不是方法：

寫好標準頭

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<htmlxmlns=”/1999/xhtml”>

高盡量用padding，慎用margin，height盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div

寬盡量用margin，慎用padding，width算準實際要的減去padding

列表類

1.ul標簽在FF中默認是有padding值的，而在IE中只有margin有值

先定義ul{margin:0;padding:0;}

2.ul和ol列表縮進問題

消除ul、ol等列表的縮進時，樣式應寫成:{list-style:none;margin:0px;padding:0px;}

顯示類

1.display:block,inline兩個元素

display:block;//可以為內嵌元素模擬為塊元素

display:inline;//實現(xiàn)同一行排列的的效果

display:table;//forFF,模擬table的效果

display:block塊元素，元素的特點是：

總是在新行上開始；

高度，行高以及頂和底邊距都可控制；

寬度缺省是它的容器的100%，除非設定一個寬度

<div>，<p>，<h1>，<form>，<ul>和<li>是塊元素的例子

display:inline就是將元素顯示為行內元素，元素的特點是：

和其他元素都在一行上；

高，行高及頂和底邊距不可改變；

寬度就是它的文字或圖片的寬度，不可改變。

<span>，<a>，<label>，<input>，<img>，<strong>和<em>是inline元素的例子

2.鼠標手指狀顯示

全部用標準的寫法cursor:pointer;

背景、圖片類

1.background顯示問題

全部注意補齊width，height屬性

2.背景透明問題

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE:filter:alpha(opacity=10);

FF:opacity:0.6;

FF:-moz-opacity:0.10;

最好兩個都寫，并將opacity屬性放在下面div+css兼容ie6ie7ie8ie9和FireFoxChrome等瀏覽器方法總結：1、FF:div設置margin-left,margin-right為auto時已經居中,IE不行。

2、FF:body設置text-align時,div需要設置margin:auto(主要是margin-left,margin-right)方可居中

3、FF:設置padding后,div會增加height和width,但IE不會,故需要用!important多設一個height和width4、FF:支持!important,IE則忽略,可用!important為FF特別設置樣式

5、div的垂直居中問題:vertical-align:middle;將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。缺點是要控制內容不要換行。6、cursor:pointer可以同時在IEFF中顯示游標手指狀，hand僅IE可以7、在mozillafirefox和IE中的BOX模型解釋不一致導致相差2px解決方法：div{margin:30px!important;margin:28px;}注意這兩個margin的順序一定不能寫反，據(jù)阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}重復定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:XXpx!important;8、ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}就能解決大部分問題注意事項：

1、float的div一定要閉合。例如：(其中floatA、floatB的屬性已經設置為float:left;)

<divid=”floatA”></div><divid=”floatB”></div><divid=”NOTfloatC”></div>這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在<divclass=”floatB”></div><divclass=”NOTfloatC”></div>之間加上<divclass=”clear”></div>這個div一定要注意聲明位置，一定要放在最恰當?shù)牡胤?，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。并且將clear這種樣式定義為為如下即可：.clear{clear:both;}此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發(fā)IE的layout私有屬性(萬惡的IE)用zoom:1;可以做到，這樣就達到了兼容。例如某一個wrapper如下定義：.colwrapper{overflow:hidden;zoom:1;margin:5pxauto;}2、margin加倍的問題設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline;例如：<divid=”imfloat”></div>相應的css為#IamFloat{float:left;margin:5px;/*IE下理解為10px*/display:inline;/*IE下再理解為5px*/}3、關于容器的包涵關系很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現(xiàn)問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。4、關于高度的問題如果是動態(tài)地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態(tài)的內容，高度最好定好。（似乎有時候不會自動往下?lián)伍_，不知道具體怎么回事）5、最狠的手段-!important;如果實在沒有辦法解決一些細節(jié)問題,可以用這個方法.FF對于”!important”會自動優(yōu)先解析,然而IE則會忽略.如下

.tabd1{background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFF*/background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}值得注意的是，一定要將xxxx!important這句放置在另一句之上，上面已經提過IE7.0對CSS的支持又有新問題。瀏覽器多了，網頁兼容性更差了，疲于奔命的還是我們，為解決IE7.0的兼容問題，找來了下面這篇文章：現(xiàn)在我大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！搜索了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應該沒有問題了?，F(xiàn)在寫一個CSS可以這樣：#example{color:#333;}/*Moz*/*html#example{color:#666;}/*IE6*/*+html#example{color:#999;}/*IE7*/那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999.一、CSSHACK以下兩種方法幾乎能解決現(xiàn)今所有HACK.1,!important隨著IE7對!important的支持,!important方法現(xiàn)在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)<style>#wrapper{width:100px!important;/*IE7+FF*/width:80px;/*IE6*/}</style>2,IE6/IE77對FireFox*+html與*html是IE特有的標簽,firefox暫不支持.而*+html又為IE7特有標簽.<style>#wrapper{#wrapper{width:120px;}/*FireFox*/*html#wrapper{width:80px;}/*ie6fixed*/*+html#wrapper{width:60px;}/*ie7fixed,注意順序*/}</style>注意:*+html對IE7的HACK必須保證HTML頂部有如下聲明：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">二、萬能float閉合關于clearfloat的原理可參見[HowToClearFloatsWithoutStructuralMarkup]將以下代碼加入GlobalCSS中,給需要閉合的div加上class="clearfix"即可,屢試不爽.<style>/*ClearFix*/.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/*HidefromIEMac*/.clearfix{display:block;}/*EndhidefromIEMac*//*endofclearfix*/</style>其他兼容技巧1,FF下給div設置padding后會導致width和height增加,但IE不會.(可用!important解決)2,居中問題.1).垂直居中.將line-height設置為當前div相同的高度,再通過vertical-align:middle.(注意內容不要換行.)2).水平居中.margin:0auto;(當然不是萬能)3,若需給a標簽內內容加上樣式,需要設置display:block;(常見于導航標簽)4,FF和IE對BOX理解的差異導致相差2px的還有設為float的div在ie下margin加倍等問題.5,ul標簽在FF下面默認有l(wèi)ist-style和padding.最好事先聲明,以避免不必要的麻煩.(常見于導航標簽和內容列表)6,作為外部wrapper的div不要定死高度,最好還加上overflow:hidden.以達到高度自適應.7,關于手形光標.cursor:pointer.而hand只適用于IE.1針對firefoxie6ie7的css樣式

現(xiàn)在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應該沒有問題了。

現(xiàn)在寫一個CSS可以這樣：

#1{color:#333;}/*Moz*/

*html#1{color:#666;}/*IE6*/

*+html#1{color:#999;}/*IE7*/那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。2css布局中的居中問題

主要的樣式定義如下：body{TEXT-ALIGN:center;}#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}說明：首先在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內的內容居中；對于IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，只要在每個拆出的div里定義MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。3盒模型不同解釋#box{width:600px;//forie6.0-w\idth:500px;//forff+ie6.0}#box{width:600px!important//forffwidth:600px;//forff+ie6.0width/**/:500px;//forie6.0-}

4浮動ie產生的雙倍距離#box{float:left;width:100px;margin:000100px;//這種情況之下IE會產生200px的距離

display:inline;//使浮動忽略}這里細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(內嵌元素);#box{display:block;//可以為內嵌元素模擬為塊元素display:inline;//實現(xiàn)同一行排列的的效果

diplay:table;IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：#box{width:80px;height:35px;}html>body#box{width:auto;height:auto;min-width:80px;min-height:35px;}6頁面的最小寬度min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個div放到body標簽下，然后為div指定一個類：然后CSS這樣設計：#container{min-width:600px;width:expression(document.body.clientWidth<600?"600px":"auto");}第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現(xiàn)最小寬度。7清除浮動.hackbox{display:table;//將對象作為塊元素級的表格顯示}或者.hackbox{clear:both;}或者加入:after（偽對象）,設置在對象后發(fā)生的內容，通常和content配合使用，IE不支持此偽對象，非Ie瀏覽器支持，所以并不影響到IE/WIN瀏覽器。這種的最麻煩的#box:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

8DIV浮動IE文本產生3象素的bug左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.#box{float:left;width:800px;}#left{float