有關(guān)JS兼容性的工作總結(jié)

關(guān)于JS兼容性的總結(jié)

在網(wǎng)站前端開發(fā)中，瀏覽器兼容性問題本已讓我們手忙腳亂，F(xiàn)irefox的出世不知道又要給我們添多少亂子。瀏覽器兼容性是前端開發(fā)框架要解決的第一個問題，要解決兼容性問題就得首先準確判斷出瀏覽器的類型及其版本。

JavaScript是前端開發(fā)的主要語言，我們可以通過編寫JavaScript程序來判斷瀏覽器的類型及版本。JavaScript判斷瀏覽器類型一般有兩種辦法，一種是根據(jù)各種瀏覽器獨有的屬性來分辨，另一種是通過分析瀏覽器的userAgent屬性來判斷的。在許多情況下，值判斷出瀏覽器類型之后，還需要判斷瀏覽器版本才能處理兼容性問題，而判斷瀏覽器的版本一般只能通過分析瀏覽器的userAgent才能知道。

在不同的瀏覽器中對js的支持程度,語法要求都不大一樣!在網(wǎng)上查尋資料，我目前暫時認識比較好的判斷代碼如下：

functiongetOs(){

varOsObject="";

if(navigator.userAgent.indexOf("MSIE")>0){return"MSIE";}

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){return"Firefox";}

if(isSafari=navigator.userAgent.indexOf("Safari")>0){return"Safari";}

if(isCamino=navigator.userAgent.indexOf("Camino")>0){return"Camino";}

if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){return"Gecko";}}

alert("您的瀏覽器類型為:"+getOs());

因此在擴展的代碼中首先要對瀏覽器進行了判斷，判斷它是否為Firefox，我添加的代碼語句為：

FF=(navigator.userAgent.indexOf("Firefox")>0)?true:false;然后對初始狀態(tài)進行設(shè)置，在W3C標準下，兼容FF的寫法，在initIt（）方法中擴展了：else{tempColl=document.getElementsByTagName("DIV");for(i=0;ielse{whichEl.style.display="none";whichIm.src="images/hdclose.gif";}

event.cancelBubble=true;}

其中，對event事件這里以方法的形式來調(diào)用：//得到EVENT對象functiongetEvent(){if(document.all)

returnwindow.event;func=getEvent.caller;while(func!=null){

vararg0=func.arguments[0];if(arg0){

if((arg0.constructor==Event||arg0.constructor==MouseEvent)||(typeof(arg0)=="object"&&arg0.preventDefault&&arg0.stopPropagation)){returnarg0;}}

func=func.caller;}

returnnull;}

擴展閱讀：CSSJS兼容性小結(jié)

1、發(fā)現(xiàn)IE下input標簽的id屬性默認和name屬性相同，而Firefox必須明確寫出id屬性的名稱否則不能使用id屬性。

如：在IE下如下代碼可以執(zhí)行而在Firefox下卻不可以：

alert(document.getElementById("username").value);

必須改為如下代碼才可以：

以下為轉(zhuǎn)載：

1.document.formName.item("itemName")問題

說明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];

Firefox下,只能使用document.formName.elements["elementName"].解決方法:統(tǒng)一使用document.formName.elements["elementName"].2.集合類對象問題

說明:IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象.

解決方法:統(tǒng)一使用[]獲取集合類對象.3.自定義屬性問題

說明:IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.

解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.4.eval("idName")問題

說明:IE下,,可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象;Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象.

解決方法:統(tǒng)一用getElementById("idName")來取得id為idName的HTML對象.5.變量名與某HTML對象ID相同的問題

說明:IE下,HTML對象的ID可以作為document的下屬對象變量名直接使用;Firefox下則不能.Firefox下,可以使用與HTML對象ID相同的變量名;IE下則不能。

解決方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML對象ID相同的變量名,以減少錯誤;在聲明變量時,一律加上var,以避免歧義.6.const問題

說明:Firefox下,可以使用const關(guān)鍵字或var關(guān)鍵字來定義常量;IE下,只能使用var關(guān)鍵字來定義常量.

解決方法:統(tǒng)一使用var關(guān)鍵字來定義常量.7.input.type屬性問題

說明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫.8.window.event問題

說明:window.event只能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event只能在事件發(fā)生的現(xiàn)場使用.Firefox必須從源處加入event作參數(shù)傳遞。Ie忽略該參數(shù)，用window.event來讀取該event。解決方法:IE&Firefox:

Submitted(event)"/>…

functionSubmitted(evt){

evt=evt?evt:(window.event?window.event:null);}

window.open("b.html","","modal=yes,width=500,height=500,resizable=no,scrollbars=no");

9.event.x與event.y問題

說明:IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even對象有pageX,pageY屬性,但是沒有x,y屬性.

解決方法:使用mX(mX=event.x?event.x:event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.10.event.srcElement問題

說明:IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性.

解決方法:使用obj(obj=event.srcElement?event.srcElement:event.target;)來代替IE下的event.srcElement或者Firefox下的event.target.請同時注意event的兼容性問題。11.window.location.href問題

說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.解決方法:使用window.location來代替window.location.href.12.模態(tài)和非模態(tài)窗口問題

說明:IE下,可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口;Firefox下則不能.

解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。如果需要將子窗口中的參數(shù)傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口.例如：varparWin=window.opener;parWin.document.getElementById("Aqing").value="Aqing";13.frame問題

以下面的frame為例：

(1)訪問frame對象:

IE:使用window.frameId或者window.frameName來訪問這個frame對象.frameId和frameName可以同名。

Firefox:只能使用window.frameName來訪問這個frame對象.另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象.(2)切換frame內(nèi)容:在IE和Firefox中都可以使用window.document.getElementById("testFrame").src="xxx.html"或window.frameName.location="xxx.html"來切換frame的內(nèi)容.

如果需要將frame中的參數(shù)傳回父窗口(注意不是opener,而是parentframe)，可以在frme中使用parent來訪問父窗口。例如：parent.document.form1.filename.value="Aqing";14.body問題

Firefox的body在body標簽沒有被瀏覽器完全讀入之前就存在；而IE的body則必須在body標簽被瀏覽器完全讀入之后才存在.15.事件委托方法

IE：document.body.onload=inject;//Functioninject()在這之前已被實現(xiàn)Firefox：document.body.onload=inject();

16.firefox與IE的父元素(parentElement)的區(qū)別IE：obj.parentElementfirefox：obj.parentNode

解決方法:因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.

17.cursor:handVScursor:pointer

firefox不支持hand，但ie支持pointer解決方法:統(tǒng)一使用pointer

18.innerText在IE中能正常工作，但是innerText在FireFox中卻不行.需用textContent。解決方法:

if(navigator.appName.indexOf("Explorer")>-1){

document.getElementById('element').innerText="mytext";}else{

document.getElementById('element').textContent="mytext";}

19.FireFox中設(shè)置HTML標簽的style時，所有位置性和字體尺寸的值必須后跟px。這個ie也是支持的。

20.ie,firefox以及其它瀏覽器對于table標簽的操作都各不相同，在ie中不允許對table和tr的innerHTML賦值，使用js增加一個tr時，使用appendChild方法也不管用。解決方法：

//向table追加一個空行：

varrow=otable.insertRow(-1);

varcell=document.createElement("td");cell.innerHTML="";cell.className="XXXX";row.appendChild(cell);21.padding問題

padding5px4px3px1pxFireFox無法解釋簡寫,

必須改成padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px;22.消除ul、ol等列表的縮進時

樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效23.CSS透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF：opacity:0.6。24.CSS圓角

IE：不支持圓角。FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-

radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;。25.CSS雙線凹凸邊框

IE：border:2pxoutset;。

FF：-moz-border-top-colors:#d4d0c8white;-moz-border-left-colors:#d4d0c8white;-moz-border-right-colors:#404040#808080;-moz-border-bottom-colors:#404040#808080;26.對select的options集合操作

枚舉元素除了[]外，selectName.options.item()也是可以的,另外selectName.options.length,selectName.options.add/remove都可以在兩種瀏覽器上使用。注意在add后賦值元素，否則會失敗（本人試驗如此）。27.XMLHTTP的區(qū)別//mf

if(window.XMLHttpRequest)//mf{

xmlhttp=newXMLHttpRequest()xmlhttp.

xmlhttp.open("GET",url,true)xmlhttp.send(null)}//ie

elseif(window.ActiveXObject)//codeforIE{

xmlhttp=newActiveXObject("Microsoft.XMLHTTP")if(xmlhttp){

xmlhttp.

xmlhttp.open("GET",url,true)xmlhttp.send()}}}

28.innerHTML的區(qū)別Firefox不支持innerHTML,解決辦法可以如下rng=document.createRange();

el=document.getElementById(elementid);rng.setStartBefore(el);

htmlFrag=rng.createContextualFragment(content);

while(el.hasChildNodes())//清除原有內(nèi)容，加入新內(nèi)容el.removeChild(el.lastChild);el.appendChild(htmlFrag);29.img的src刷新問題

在IE下可以用可以刷新圖片，但在FireFox下不行。主要是緩存問題，在地址后面加個隨機數(shù)就解決了。編輯onclick事件代碼如下："this.src=this.src+'?'+Math.random()"30.obj.style.pixelLeft地問題

if(navigator.appName.indexOf("Explorer")>-1){//IEobj.style.pixelLeft=newX+8;obj.style.pixelTop=newY-5;}else{

obj.style.left=parseInt(newX)-155+"px";//Firefox對"px"要求嚴格obj.style.top=parseInt(newY)-135+"px";}

詳細出處參考：

CSS對瀏覽器器的兼容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點。

php程序員站

常見兼容問題：

1.DOCTYPE影響CSS處理

2.FF:div設(shè)置margin-left,margin-right為auto時已經(jīng)居中,IE不行

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

phperz.com

4.FF:設(shè)置padding后,div會增加height和width,但IE不會,故需要用!important多設(shè)一個height和width

5.FF:支持!important,IE則忽略,可用!important為FF特別設(shè)置樣式phperz.com

6.div的垂直居中問題:vertical-align:middle;將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行

7.cursor:pointer可以同時在IEFF中顯示游標手指狀，hand僅IE可以

8.FF:鏈接加邊框和背景色，需設(shè)置display:block,同時設(shè)置float:left保證不換行。參照menubar,給a和menubar設(shè)置高度是為了避免底邊顯示錯位,若不設(shè)height,可以在menubar中插入一個空格。

9.在mozillafirefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序一定不能寫反，據(jù)阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}

重復(fù)定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:XXpx!important;

10.IE5和IE6的BOX解釋不一致IE5下

div{width:300px;margin:010px010px;}

div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改

div{width:300px!important;width/**/:340px;margin:010px010px}

關(guān)于這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了�。海�

11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義

ul{margin:0;padding:0;}就能解決大部分問題

注意事項：

1、float的div一定要閉合。

php程序員站

例如：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)

這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。

這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在

之間加上

這個div一定要注意聲明位置，一定要放在最恰當?shù)牡胤剑�而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關(guān)系，否則會產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clear{

clear:both;}

此外，為了讓高度能自動適應(yīng)，要在wrapper里面加上overflow:hidden;當包含float的box的時候，高度自動適應(yīng)在IE下無效，這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE�。�)用zoom:1;可以做到，這樣就達到了兼容。例如某一個wrapper如下定義：.colwrapper{

overflow:hidden;

phperz.com

zoom:1;

margin:5pxauto;}phperz.com

2、margin加倍的問題。

設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug。

解決方案是在這個div里面加上display:inline;例如：

相應(yīng)的css為

#IamFloat{float:left;

margin:5px;/*IE下理解為10px*/

display:inline;/*IE下再理解為5px*/}

3、關(guān)于容器的包涵關(guān)系

很多時候，尤其是容器內(nèi)有平行布局，例如兩、三個float的div時，寬度很容易出現(xiàn)問題。在IE中，外層的寬度會被內(nèi)層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。

4、關(guān)于高度的問題

如果是動態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態(tài)的內(nè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這句放置在另一句之上，上面已經(jīng)提過

CSSHack的原理是什么

由于不同的瀏覽器對CSS的支持及解析結(jié)果不一樣，還由于CSS中的優(yōu)先級的關(guān)系。我們就可以根據(jù)這個來針對不同的瀏覽器來寫不同的CSS。

比如IE6能識別下劃線"_"和星號"*"，IE7能識別星號"*"，當不能識別下劃線"_"，而firefox兩個都不能認識。等等

書寫順序，一般是將識別能力強的瀏覽器的CSS寫在后面。下面如何寫里面說得更詳細些。

如何寫CSSHack

比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：div{

background:green;/*forfirefox*/*background:red;/*forIE6*/}

我在IE6中看到是紅色的，在firefox中看到是綠色的。解釋一下：

上面的css在firefox中，它是認識不了后面的那個帶星號的東東是什么的，于是將它過濾掉，不予理睬，解析得到的結(jié)果是:div{background:green},于是理所當然這個div的背景是綠色的。

在IE6中呢，它兩個background都能識別出來，它解析得到的結(jié)果是:div{background:green;background:red;},于是根據(jù)優(yōu)先級別，處在后面的red的優(yōu)先級高，于是當然這個div的背景顏色就是紅色的了。CSShack:區(qū)分IE6，IE7，firefox區(qū)別不同瀏覽器，CSShack寫法：區(qū)別IE6與FF：

background:orange;*background:blue;區(qū)別IE6與IE7：

background:green!important;background:blue;區(qū)別IE7與FF：

background:orange;*background:green;區(qū)別FF，IE7，IE6：background:orange;*background:green;_background:blue;

background:orange;*background:green!important;*background:blue;注：IE都能識別*;標準瀏覽器(如FF)不能識別*；IE6能識別*，但不能識別!important,IE7能識別*，也能識別!important;FF不能識別*，但能識別!important;IE6IE7FF*√√×!important×√√

瀏覽器優(yōu)先級別:FF寫；

或者，將div放入li中進行處理，這樣就不會有空格的問題。（2）Margin加倍

IE:在使用float的情況下，IE的margin加倍。FF:正常顯示。

建議：針對IE，添加display:inline;相應(yīng)的css為#float{

float:left;

margin:5px;/*IE下理解為10px*/

display:inline;/*IE下再理解為5px*/}

4.鼠標位置處理

IE:獲取事件鼠標位置時，IE用的是event.x和event.y，并且值在不加單位的情況下可以直接使用,IE提供默認單位；div.style.left=event.xdiv.style.top=event.y

此時，div顯示的位置為鼠標的位置。

FF:獲取事件鼠標位置時，F(xiàn)irefox用的是MouseEvent.pageX和MouseEvent.pageY，并且在不加單位的情況下直接賦值后，無效；必須添加單位。div.style.left=MouseEvent.pageXdiv.style.top=MouseEvent.pageY此時，div顯示的位置為0，0.

建議：都添加單位,無論針對IE或者Firefox都有效。IE：div.style.left=event.x+"px"div.style.top=event.y+"px"

FF：div.style.left=MouseEvent.pageX+"px"div.style.top=MouseEvent.pageY+"px"

針對IE與Firefox這些不同，解決方案可以有多種，但是當問題直接解析模型的不同的時候，我們只能分別針對瀏覽器的不同而單獨寫針對于瀏覽器的方法。這也是寫精致CSS所必須懂得的。

以上純屬個人愚見，希望對新學(xué)CSS的同學(xué)有所幫助。責(zé)編：奇?zhèn)b|RSS收藏此頁到365Key

暫無評論匿名評論相關(guān)文章

CSS兼容IE和Firefox的技巧大全日期：201*年11月15日作者：

CSS對瀏覽器的兼容性有時讓人很頭疼，或許當你了解當中的技巧跟原理，就會覺得也不是難事，從網(wǎng)上收集了IE7,6與Fireofx的兼容性處理技巧并整理了一下。對于web2.0的過度，請盡量用xhtml格式寫代碼，而且DOCTYPE影響CSS處理，作為W3C的標準，一定要加DOCTYPE聲明。

CSS技巧

1.div的垂直居中問題

vertical-align:middle;將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行

2.margin加倍的問題

設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline;例如：

＜#divid=”imfloat”>相應(yīng)的css為#imfloat{float:left;

margin:5px;/*IE下理解為10px*/

display:inline;/*IE下再理解為5px*/}

3.浮動ie產(chǎn)生的雙倍距離

#box{float:left;width:100px;margin:000100px;//這種情況之下IE會產(chǎn)生200px的距離display:inline;//使浮動忽略}

這里細說一下block與inline兩個元素：block元素的特點是,總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是,和其他元素在同一行上,不可控制(內(nèi)嵌元素);

#box{display:block;//可以為內(nèi)嵌元素模擬為塊元素display:inline;//實現(xiàn)同一行排列的效果diplay:table;

4IE與寬度和高度的問題IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設(shè)置寬度和高度。

比如要設(shè)置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：#box{width:80px;height:35px;}html>body#box{width:auto;height:auto;min-width:80px;min-height:35px;}

5.頁面的最小寬度

min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個＜div>放到＜body>標簽下，然后為div指定一個類,然后CSS這樣設(shè)計：#container{min-width:600px;width:expression(document.body.clientWidth＜600?"600px":"auto");}第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現(xiàn)最小寬度。

6.DIV浮動IE文本產(chǎn)生3象素的bug

左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內(nèi)的文本會離左邊有3px的間距.

#box{float:left;width:800px;}#left{float:left;width:50%;}#right{width:50%;}

*html#left{margin-right:-3px;//這句是關(guān)鍵}＜divid="box">

＜divid="left">＜/div>＜divid="right">＜/div>＜/div>

7.IE捉迷藏的問題

當div應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。

有些內(nèi)容顯示不出來，當鼠標選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。

8.float的div閉合;清除浮動;自適應(yīng)高度;

①例如：＜#divid=”floatA”>＜#divid=”floatB”>＜#divid=”NOTfloatC”>這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)

這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在＜#divclass=”floatB”>＜#divclass=”NOTfloatC”>之間加上＜#divclass=”clear”>這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關(guān)系，否則會產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clear{clear:both;}

②作為外部wrapper的div不要定死高度,為了讓高度能自動適應(yīng)，要在wrapper里面加上overflow:hidden;當包含float的box的時候，高度自動適應(yīng)在IE下無效，這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE��！)用zoom:1;可以做到，這樣就達到了兼容。例如某一個wrapper如下定義：

.colwrapper{overflow:hidden;zoom:1;margin:5pxauto;}

③對于排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的floatdiv后面做一個統(tǒng)一的背景,譬如:＜divid=”page”>

＜divid=”left”>＜/div>＜divid=”center”>＜/div>＜divid=”right”>＜/div>＜/div>

比如我們要將page的背景設(shè)置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發(fā)現(xiàn)隨著leftcenterright的向下拉長,而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決＜divid=”page”>

＜divid=”bg”style=”float:left;width:100%”>＜divid=”left”>＜/div>＜divid=”center”>＜/div>＜divid=”right”>＜/div>＜/div>＜/div>

再嵌入一個floatleft而寬度是100%的DIV解決之

④萬能float閉合(非常重要!)

關(guān)于clearfloat的原理可參見[HowToClearFloatsWithoutStructuralMarkup],將以下代碼加入GlobalCSS中,給需要閉合的div加上class="clearfix"即可,屢試不爽./*ClearFix*/

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}/*HidefromIEMac*/.clearfix{display:block;}/*EndhidefromIEMac*//*endofclearfix*/

或者這樣設(shè)置：.hackbox{display:table;//將對象作為塊元素級的表格顯示}

９．高度不適應(yīng)

高度不適應(yīng)是當內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進行調(diào)節(jié)，特別是當內(nèi)層對象使用margin或paddign時。例：

#box{background-color:#eee;}

#boxp{margin-top:20px;margin-bottom:20px;text-align:center;}＜divid="box">

＜p>p對象中的內(nèi)容＜/p>＜/div>

解決技巧：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。

10.IE6下為什么圖片下有空隙產(chǎn)生

解決這個BUG的技巧也有很多,可以是改變html的排版,或者設(shè)置img為display:block或者設(shè)置vertical-align屬性為vertical-align:topbottommiddletext-bottom都可以解決.

11.如何對齊文本與文本輸入框

加上vertical-align:middle;＜styletype="text/css">＜!--input{

width:200px;height:30px;

border:1pxsolidred;vertical-align:middle;}-->

＜/style>

12.web標準中定義id與class有什么區(qū)別嗎

一.web標準中是不容許重復(fù)ID的,比如divid="aa"不容許重復(fù)2次,而class定義的是類,理論上可以無限重復(fù),這樣需要多次引用的定義便可以使用他.

二.屬性的優(yōu)先級問題ID的優(yōu)先級要高于class,看上面的例子

三.方便JS等客戶端腳本,如果在頁面中要對某個對象進行腳本操作,那么可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.

13.LI中內(nèi)容超過長度后以省略號顯示的技巧

此技巧適用與IE與OP瀏覽器

＜styletype="text/css">＜!--li{

width:200px;

white-space:nowrap;

text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}

-->

＜/style>

14.為什么web標準中IE無法設(shè)置滾動條顏色了

解決辦法是將body換成html

＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""-strict.dtd">＜metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>＜styletype="text/css">＜!--html{

scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#000;scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;}-->

＜/style>15.為什么無法定義1px左右高度的容器

IE6下這個問題是因為默認的行高造成的,解決的技巧也有很多,例如:overflow:hiddenzoom:0.08line-height:1px

16.怎么樣才能讓層顯示在FLASH之上呢

解決的辦法是給FLASH設(shè)置透明

＜paramname="wmode"value="transparent"/>

17.怎樣使一個層垂直居中于瀏覽器中

這里我們使用百分比絕對定位,與外補丁負值的技巧,負值的大小為其自身寬度高度除以二

＜styletype="text/css">＜!--div{

position:absolute;top:50%;lef:50%;

margin:-100px00-100px;width:200px;height:200px;

border:1pxsolidred;}-->

＜/style>FF與IE

1.Div居中問題

div設(shè)置margin-left,margin-right為auto時已經(jīng)居中，IE不行，IE需要設(shè)定body居中，首先在父級元素定義text-algin:center;這個的意思就是在父級元素內(nèi)的內(nèi)容居中。

2.鏈接(a標簽)的邊框與背景

a鏈接加邊框和背景色，需設(shè)置display:block,同時設(shè)置float:left保證不換行。參照menubar,給a和menubar設(shè)置高度是為了避免底邊顯示錯位,若不設(shè)height,可以在menubar中插入一個空格。

3.超鏈接訪問過后hover樣式就不出現(xiàn)的問題

被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過這個問題,解決技巧是改變CSS屬性的排列順序:L-V-H-A

Code:

＜styletype="text/css">＜!--

a:link{}a:visited{}a:hover{}a:active{}-->

＜/style>

4.游標手指cursor

cursor:pointer可以同時在IEFF中顯示游標手指狀，hand僅IE可以

5.UL的padding與margin

ul標簽在FF中默認是有padding值的,而在IE中只有margin默認有值,所以先定義ul{margin:0;padding:0;}就能解決大部分問題

6.FORM標簽

這個標簽在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,所以后面就不會為這個頭疼了.

7.BOX模型解釋不一致問題

在FF和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決技巧：div{margin:30px!important;margin:28px;}注意這兩個margin的順序一定不能寫反，important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}重復(fù)定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:xxpx!important;

#box{width:600px;//forie6.0-w\\idth:500px;//forff+ie6.0}

#box{width:600px!important//forffwidth:600px;//forff+ie6.0width/**/:500px;//forie6.0-}

8.屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)

p[id]{}div[id]{}

這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用.屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.

9.最狠的手段-!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這句放置在另一句之上，上面已經(jīng)提過

10.IE,FF的默認值問題

或許你一直在抱怨為什么要專門為IE和FF寫不同的CSS，為什么IE這樣讓人頭疼，然后一邊寫css，一邊咒罵那個可惡的M$IE.其實對于css的標準支持方面，IE并沒有我們想象的那么可惡，關(guān)鍵在于IE和FF的默認值不一樣而已，掌握了這個技巧，你會發(fā)現(xiàn)寫出兼容FF和IE的css并不是那么困難，或許對于簡單的css，你完全可以不用”!important”這個東西了。

我們都知道，瀏覽器在顯示網(wǎng)頁的時候，都會根據(jù)網(wǎng)頁的css樣式表來決定如何顯示，但是我們在樣式表中未必會將所有的元素都進行了具體的描述，當然也沒有必要那么做，所以對于那些沒有描述的屬性，瀏覽器將采用內(nèi)置默認的方式來進行顯示，譬如文字，如果你沒有在css中指定顏色，那么瀏覽器將采用黑色或者系統(tǒng)顏色來顯示，div或者其他元素的背景，如果在css中沒有被指定，瀏覽器則將其設(shè)置為白色或者透明，等等其他未定義的樣式均如此。所以有很多東西出現(xiàn)FF和IE顯示不一樣的根本原因在于它們的默認顯示不一樣，而這個默認樣式該如何顯示我知道在w3中有沒有對應(yīng)的標準來進行規(guī)定，因此對于這點也就別去怪罪IE了。

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

標準瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px;這里為了照顧不認識min-height的IE6可以這樣定義:{

height:auto!important;height:200px;

min-height:200px;}

12.FireFox下如何使連續(xù)長字段自動換行

眾所周知IE中直接使用word-wrap:break-word就可以了,FF中我們使用JS插入

的技巧來解決

＜styletype="text/css">＜!--div{

width:300px;

word-wrap:break-word;border:1pxsolidred;}-->

＜/style>

＜divid="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa＜/div>

＜scrīpttype="text/javascrīpt">/*＜![CDATA[*/

functiontoBreakWord(el,intLen){varōbj=document.getElementById(el);varstrContent=obj.innerHTML;varstrTemp="";

while(strContent.length>intLen){

strTemp+=strContent.substr(0,intLen)+"";

strContent=strContent.substr(intLen,strContent.length);}

strTemp+=""+strContent;

obj.innerHTML=strTemp;}

if(document.getElementById&&!document.all)toBreakWord("ff",37);/*]]>*/＜/scrīpt>

13.為什么IE6下容器的寬度和FF解釋不同呢

＜?xmlversion="1.0"encoding="gb2312"?>

＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""-strict.dtd">＜metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

＜styletype="text/css">wenku_21({"font":{"be80383043323968011c927d0010015":"宋體","be80383043323968011c927d00201*5":"宋體"},"style":[{"t":"style","c":[1,2,3,4,5,6,7,8,0],"s":{"color":"#000000","font-size":"18"}},{"t":"style","c":[5,1],"s":{"font-family":"be80383043323968011c927d00201*5"}},{"t":"style","c":[3,4,6,7,8,2],"s":{"font-family":"be8038304332396801＜![endif]-->

第三種，cssfilter的辦法，以下為經(jīng)典從國外網(wǎng)站翻譯過來的。.

新建一個css樣式如下：#item{

width:200px;height:200px;background:red;}

新建一個div,并使用前面定義的css的樣式：＜divid="item">sometexthere＜/div>

在body表現(xiàn)這里加入lang屬性,中文為zh：＜bodylang="en">

現(xiàn)在對div元素再定義一個樣式：*:lang(en)#item{

background:green!important;}

這樣做是為了用!important覆蓋原來的css樣式,由于:lang選擇器ie7.0并不支持,所以對這句話不會有任何作用,于是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式：

item:empty{

background:green!important}

:empty選擇器為css3的規(guī)范,盡管safari并不支持此規(guī)范,但是還是會選擇此元素,不管是否此元素存在,現(xiàn)在綠色會現(xiàn)在在除ie各版本以外的瀏覽器上。

對IE6和FF的兼容可以考慮以前的!important個人比較喜歡用第一種，簡潔，兼容性比較好。

友情提示：本文中關(guān)于《有關(guān)JS兼容性的工作總結(jié)》給出的范例僅供您參考拓展思維使用，有關(guān)JS兼容性的工作總結(jié)：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《有關(guān)JS兼容性的工作總結(jié)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://m.seogis.com/gongwen/626211.html

• 上一篇：SEO工作者201*年底工作總結(jié)
• 下一篇：卜蜂蓮花前端收銀培訓(xùn)總結(jié)