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

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

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

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

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

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());

因此在擴(kuò)展的代碼中首先要對(duì)瀏覽器進(jìn)行了判斷，判斷它是否為Firefox，我添加的代碼語(yǔ)句為：

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

event.cancelBubble=true;}

其中，對(duì)event事件這里以方法的形式來(lái)調(diào)用：//得到EVENT對(duì)象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;}

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

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

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

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

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

以下為轉(zhuǎn)載：

1.document.formName.item("itemName")問(wèn)題

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

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

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

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

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

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

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

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

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

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

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

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

說(shuō)明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫.8.window.event問(wèn)題

說(shuō)明:window.event只能在IE下運(yùn)行,而不能在Firefox下運(yùn)行,這是因?yàn)镕irefox的event只能在事件發(fā)生的現(xiàn)場(chǎng)使用.Firefox必須從源處加入event作參數(shù)傳遞。Ie忽略該參數(shù)，用window.event來(lái)讀取該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問(wèn)題

說(shuō)明:IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;Firefox下,even對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性.

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

說(shuō)明:IE下,event對(duì)象有srcElement屬性,但是沒(méi)有target屬性;Firefox下,even對(duì)象有target屬性,但是沒(méi)有srcElement屬性.

解決方法:使用obj(obj=event.srcElement?event.srcElement:event.target;)來(lái)代替IE下的event.srcElement或者Firefox下的event.target.請(qǐng)同時(shí)注意event的兼容性問(wèn)題。11.window.location.href問(wèn)題

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

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

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

以下面的frame為例：

(1)訪問(wèn)frame對(duì)象:

IE:使用window.frameId或者window.frameName來(lái)訪問(wèn)這個(gè)frame對(duì)象.frameId和frameName可以同名。

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

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

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

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

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

解決方法:因?yàn)閒irefox與IE都支持DOM,因此使用obj.parentNode是不錯(cuò)選擇.

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標(biāo)簽的style時(shí)，所有位置性和字體尺寸的值必須后跟px。這個(gè)ie也是支持的。

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

//向table追加一個(gè)空行：

varrow=otable.insertRow(-1);

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

padding5px4px3px1pxFireFox無(wú)法解釋簡(jiǎn)寫,

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

樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對(duì)IE有效，padding屬性對(duì)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.對(duì)select的options集合操作

枚舉元素除了[]外，selectName.options.item()也是可以的,另外selectName.options.length,selectName.options.add/remove都可以在兩種瀏覽器上使用。注意在add后賦值元素，否則會(huì)失�。ū救嗽囼�(yàn)如此）。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刷新問(wèn)題

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

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對(duì)"px"要求嚴(yán)格obj.style.top=parseInt(newY)-135+"px";}

詳細(xì)出處參考：

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

php程序員站

常見(jiàn)兼容問(wèn)題：

1.DOCTYPE影響CSS處理

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

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

phperz.com

4.FF:設(shè)置padding后,div會(huì)增加height和width,但I(xiàn)E不會(huì),故需要用!important多設(shè)一個(gè)height和width

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

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

7.cursor:pointer可以同時(shí)在IEFF中顯示游標(biāo)手指狀，hand僅IE可以

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

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

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

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

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

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

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

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

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

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

11.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義

ul{margin:0;padding:0;}就能解決大部分問(wèn)題

注意事項(xiàng)：

1、float的div一定要閉合。

php程序員站

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

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

這段代碼在IE中毫無(wú)問(wèn)題，問(wèn)題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。在

之間加上

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

clear:both;}

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

overflow:hidden;

phperz.com

zoom:1;

margin:5pxauto;}phperz.com

2、margin加倍的問(wèn)題。

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

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

相應(yīng)的css為

#IamFloat{float:left;

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

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

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

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

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

如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_(kāi)，不知道具體怎么回事）

5、最狠的手段-!important;如果實(shí)在沒(méi)有辦法解決一些細(xì)節(jié)問(wèn)題,可以用這個(gè)方法.FF對(duì)于"!important"會(huì)自動(dòng)優(yōu)先解析,然而IE則會(huì)忽略.如下.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)提過(guò)

CSSHack的原理是什么

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

比如IE6能識(shí)別下劃線"_"和星號(hào)"*"，IE7能識(shí)別星號(hào)"*"，當(dāng)不能識(shí)別下劃線"_"，而firefox兩個(gè)都不能認(rèn)識(shí)。等等

書寫順序，一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫在后面。下面如何寫里面說(shuō)得更詳細(xì)些。

如何寫CSSHack

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

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

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

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

在IE6中呢，它兩個(gè)background都能識(shí)別出來(lái)，它解析得到的結(jié)果是:div{background:green;background:red;},于是根據(jù)優(yōu)先級(jí)別，處在后面的red的優(yōu)先級(jí)高，于是當(dāng)然這個(gè)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都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*；IE6能識(shí)別*，但不能識(shí)別!important,IE7能識(shí)別*，也能識(shí)別!important;FF不能識(shí)別*，但能識(shí)別!important;IE6IE7FF*√√×!important×√√

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

或者，將div放入li中進(jìn)行處理，這樣就不會(huì)有空格的問(wèn)題。（2）Margin加倍

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

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

float:left;

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

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

4.鼠標(biāo)位置處理

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

此時(shí)，div顯示的位置為鼠標(biāo)的位置。

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

建議：都添加單位,無(wú)論針對(duì)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"

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

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

暫無(wú)評(píng)論匿名評(píng)論相關(guān)文章

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

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

CSS技巧

1.div的垂直居中問(wèn)題

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

2.margin加倍的問(wèn)題

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

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

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

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

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

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

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

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

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

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

5.頁(yè)面的最小寬度

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

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

左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有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捉迷藏的問(wèn)題

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

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

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

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

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

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

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

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

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

比如我們要將page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會(huì)發(fā)現(xiàn)隨著leftcenterright的向下拉長(zhǎng),而page居然保存高度不變,問(wèn)題來(lái)了,原因在于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>

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

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

關(guān)于clearfloat的原理可參見(jiàn)[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;//將對(duì)象作為塊元素級(jí)的表格顯示}

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

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

#box{background-color:#eee;}

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

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

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

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

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

11.如何對(duì)齊文本與文本輸入框

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

width:200px;height:30px;

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

＜/style>

12.web標(biāo)準(zhǔn)中定義id與class有什么區(qū)別嗎

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

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

三.方便JS等客戶端腳本,如果在頁(yè)面中要對(duì)某個(gè)對(duì)象進(jìn)行腳本操作,那么可以給他定義一個(gè)ID,否則只能利用遍歷頁(yè)面元素加上指定特定屬性來(lái)找到它,這是相對(duì)浪費(fèi)時(shí)間資源,遠(yuǎn)遠(yuǎn)不如一個(gè)ID來(lái)得簡(jiǎn)單.

13.LI中內(nèi)容超過(guò)長(zhǎng)度后以省略號(hào)顯示的技巧

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

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

width:200px;

white-space:nowrap;

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

-->

＜/style>

14.為什么web標(biāo)準(zhǔn)中IE無(wú)法設(shè)置滾動(dòng)條顏色了

解決辦法是將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.為什么無(wú)法定義1px左右高度的容器

IE6下這個(gè)問(wèn)題是因?yàn)槟�認(rèn)的行高造成的,解決的技巧也有很多,例如:overflow:hiddenzoom:0.08line-height:1px

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

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

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

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

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

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

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

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

border:1pxsolidred;}-->

＜/style>FF與IE

1.Div居中問(wèn)題

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

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

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

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

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

Code:

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

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

＜/style>

4.游標(biāo)手指cursor

cursor:pointer可以同時(shí)在IEFF中顯示游標(biāo)手指狀，hand僅IE可以

5.UL的padding與margin

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

6.FORM標(biāo)簽

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

7.BOX模型解釋不一致問(wèn)題

在FF和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決技巧：div{margin:30px!important;margin:28px;}注意這兩個(gè)margin的順序一定不能寫反，important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：div{maring:30px;margin:28px}重復(fù)定義的話按照最后一個(gè)來(lái)執(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.屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)

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

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

9.最狠的手段-!important;

如果實(shí)在沒(méi)有辦法解決一些細(xì)節(jié)問(wèn)題,可以用這個(gè)技巧.FF對(duì)于”!important”會(huì)自動(dòng)優(yōu)先解析,然而IE則會(huì)忽略.如下.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)提過(guò)

10.IE,FF的默認(rèn)值問(wèn)題

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

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

11.為什么FF下文本無(wú)法撐開(kāi)容器的高度

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

height:auto!important;height:200px;

min-height:200px;}

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

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

的技巧來(lái)解決

＜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)典從國(guó)外網(wǎng)站翻譯過(guò)來(lái)的。.

新建一個(gè)css樣式如下：#item{

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

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

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

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

background:green!important;}

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

item:empty{

background:green!important}

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

對(duì)IE6和FF的兼容可以考慮以前的!important個(gè)人比較喜歡用第一種，簡(jiǎn)潔，兼容性比較好。

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

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

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

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