幾種解決Div CSS兼容IE和FF瀏覽器的方案

1、這里大家要知道CSS不兼容的原因是因?yàn)楦鳛g覽器給CSS默認(rèn)屬性值不一樣造成的。 第一招：給常用CSS規(guī)定屬性值。 body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,tdmargin:0;padding:0; imgborder:0px; ul margin:0px;padding:0px;/ ul li list-style:none; 上面的建站常用代碼就相是格式化CSS樣式，讓各瀏覽器按照我們設(shè)置的屬性值渲染網(wǎng)頁 第二招：IE和FF下對象居中問題 IE下大家應(yīng)該知道只要設(shè)置bodytext-align:center;這樣就可以居中

2、顯示。 但是這樣的方法在FF不行的。這里就需要給修改成body:text-align:center;margin:0px auto;Margin的意思就是上下距離為0像素，左右為自動。所以FF就會居中顯示。 第三招：垂直居中（僅只用于一行） 比如說一個高30px的div，問題默認(rèn)是會顯示在左上角，如果想垂直居中對其可以加個line-height:30px;樣式。如果你想讓他居下方則在修改line-height:30px;數(shù)值越大越局下，為了防止撐破層，還需要再給一個樣式overflow:hidden;(超出的部分不顯示) 第四招：給每一個塊對象設(shè)置三個樣式 width:*px;height:*

3、px;overflow:hidden;即便高、寬是屬性值是自動那么也需要去設(shè)置這三個樣式。目的就是解決瀏覽器默認(rèn)值的問題。 第五招：針對IE6、IE7、FF的css樣式(這一招在特殊情況下經(jīng)常用到) 原來建設(shè)網(wǎng)站經(jīng)常使用!important來設(shè)置優(yōu)先權(quán)，但有了IE7之后就不行了。下面給大家個可以解決IE6、IE7、FF各個CSS優(yōu)先權(quán)的方法 #1 color: #333; /* FF環(huán)境 */ * html #1 color: #666; /* IE6環(huán)境 */ *+html #1 color: #999; /* IE7環(huán)境 */ 上面的書寫順序一定不能去改變。 這樣子網(wǎng)頁在FF下顯示#333

4、，IE6下顯示#666，IE7下顯示#999; 文章來自學(xué)IT網(wǎng)： 以下是ie,ff瀏覽器的兼容的問題的總結(jié). png透明 AlphaImageLoader filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL) enabled：可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true：默認(rèn)值。濾鏡激活。false：濾鏡被禁止。 sizingMethod：可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的

5、顯示方式。crop：剪切圖片以適應(yīng)對象尺寸。image：默認(rèn)值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸。scale：縮放圖片以適應(yīng)對象的尺寸邊界。 src：必選項(xiàng)。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會作用。 firefox不能對innerText支持 firefox支持innerHTML但卻不支持innerText，它支持textContent來實(shí)現(xiàn)innerText，不過默認(rèn)把多余的空格也保留了。如果不用textContent，如果字符串 里面不包含HTML代碼也可以用innerHTML代替。 禁止選取網(wǎng)頁內(nèi)容 在IE中一般用js：o

6、bj.onselectstart=function()return false; 而firefox用CSS:-moz-user-select:none 濾鏡的支持(例：透明濾鏡) IE:filter：alpha(opacity=10); firefox：-moz-opacity:.10; 捕獲事件 IE：obj.setCapture() 、obj.releaseCapture() Firefox：document.addEventListener(”mousemove”,mousemovefunction,true); document.removeEventListener(”mousemo

7、ve”,mousemovefunction,true); 獲取鼠標(biāo)位置 IE:event.clientX、event.clientY firefox：需要事件函數(shù)傳遞事件對象 obj.onmousemove=function(ev) X= ev.pageX;Y=ev.pageY; DIV等元素的邊界問題 比如：設(shè)置一個div的CSS:：width:100px;height:100px;border:#000000 1px solid; IE中：div的寬度（包括邊框?qū)挾龋?00px，div的高度（包括邊框?qū)挾龋?00px； 而firefox：div的寬度（包括邊框?qū)挾龋?02px，div

8、的高度（包括邊框?qū)挾龋?02px； 判斷瀏覽器類型 var isIE=document.all ? true : false; 我寫了一個變量，如果支持document.all語法那么isIE=true，否則isIE=false 在不同瀏覽器下的CSS處理 一般可以用!important來優(yōu)先使用css語句（僅firefox支持） 比如：border-width:0px!important;border-width:1px; 在firefox下這個元素是沒有邊框的，在IE下邊框?qū)挾仁?px document.formName.item(”itemName”) 問題 問題說明：IE下，可以使用

9、 document.formName.item(”itemName”) 或 document.formName.elements elementName；Firefox下，只能使用document.formName.elementselementName。 解決方法：統(tǒng)一使用document.formName.elementselementName。 集合類對象問題 問題說明：IE下，可以使用()或獲取集合類對象；Firefox下，只能使用獲取集合類對象。 解決方法：統(tǒng)一使用 獲取集合類對象。 自定義屬性問題 問題說明：IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用 getAt

10、tribute() 獲取自定義屬性；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

11、 的HTML對象。 變量名與某HTML對象ID相同的問題 問題說明：IE下，HTML對象的ID可以作為 document 的下屬對象變量名直接使用，F(xiàn)irefox下則不能；Firefox下，可以使用與HTML對象ID相 同的變量名，IE下則不能。 解決方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML對象ID相同的變量名，以減少錯誤；在聲明變量時(shí)，一律加上var關(guān)鍵字，以避免歧義。 const問題 問題說明：Firefox下，可以使用const關(guān)鍵字或var關(guān)鍵字來定義常量；IE下，只能使用var關(guān)鍵字來定義

12、常量。 解決方法：統(tǒng)一使用var關(guān)鍵字來定義常量。 input.type屬性問題 問題說明：IE下 input.type 屬性為只讀；但是Firefox下 input.type 屬性為讀寫。 解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input，然后在同樣的位置再插入一個新的input元素。 window.event問題 問題說明：window.event 只能在IE下運(yùn)行，而不能在Firefox下運(yùn)行，這是因?yàn)镕irefox的event只能在事件發(fā)生的現(xiàn)場使用。 解決方法：在事件發(fā)生的函數(shù)上加上event參數(shù)，在函數(shù)體內(nèi)(假設(shè)形參為evt)使用 var m

13、yEvent = evt?evt:(window.event?window.event:null) 示例： function doSomething(evt) var myEvent = evt ? evt: (window.event ? window.event : null) event.x與event.y問題 問題說明：IE下，even對象有x、y屬性，但是沒有pageX、pageY屬性；Firefox下，even對象有pageX、pageY屬性，但是沒有x、y屬性。 解決方法：var myX = event.x ? event.x : event.pageX;var myY = ev

14、ent.y ? event.y:event.pageY; 如果考慮第8條問題，就改用myEvent代替event即可。 event.srcElement問題 問題說明：IE下，even對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。 解決方法：使用srcObj = event.srcElement ? event.srcElement : event.target; 如果考慮第8條問題，就改用myEvent代替event即可。 window.location.href問題 問題說明：IE或者Firef

15、ox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。 解決方法：使用 window.location 來代替 window.location.href。當(dāng)然也可以考慮使用 location.replace()方法。 模態(tài)和非模態(tài)窗口問題 問題說明：IE下，可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口；Firefox下則不能。 解決方法：直接使用 window.open(pageURL,name,parameters) 方式打開新

16、窗口。 如果需要將子窗口中的參數(shù)傳遞回父窗口，可以在子窗口中使用window.opener來訪問父窗口。如果需要父窗口控制子窗口的話，使用var subWindow = window.open(pageURL,name,parameters);來獲得新開的窗口對象。 frame和iframe問題 以下面的fra me為例： (1)訪問frame對象 IE：使用window.frameId或者window.frameName來訪問這個frame對象； Firefox：使用window.frameName來訪問這個frame對象； 解決方法：統(tǒng)一使用 window.document.getElem

17、entById(”frameId”) 來訪問這個frame對象； (2)切換frame內(nèi)容 在IE和Firefox中都可以使用window.document.getElementById(”frameId”).src = “xxx.html”或window.frameName.location = “xxx.html”來切換frame的內(nèi)容； 如果需要將frame中的參數(shù)傳回父窗口，可以在frame中使用parent關(guān)鍵字來訪問父窗口。 body載入問題 問題說明：Firefox的body對象在body標(biāo)簽沒有被瀏覽器完全讀入之前就存在；而IE的body對象則必須在body標(biāo)簽被瀏覽器完全讀入

18、之后才存在。 注 這個問題尚未實(shí)際驗(yàn)證，待驗(yàn)證后再來修改。 注 經(jīng)驗(yàn)證，IE6、Opera9以及FireFox2中不存在上述問題，單純的JS腳本可以訪問在腳本之前已經(jīng)載入的所有對象和元素，即使這個元素還沒有載入完成。 事件委托方法 問題說明：IE下，使用 document.body.onload = inject;其中function inject()在這之前已被實(shí)現(xiàn)；在Firefox下，使用 document.body.onload = inject(); 解決方法：統(tǒng)一使用 document.body.onload=new Function(”inject()”);或者 document.

19、body.onload = function()/* 這里是代碼 */ 注意 Function和function的區(qū)別 訪問的父元素的區(qū)別 問題說明：在IE下，使用 obj.parentElement 或 obj.parentNode 訪問obj的父結(jié)點(diǎn)；在firefox下，使用 obj.parentNode 訪問obj的父結(jié)點(diǎn)。 解決方法：因?yàn)閒irefox與IE都支持DOM，因此統(tǒng)一使用obj.parentNode 來訪問obj的父結(jié)點(diǎn)。 cursor:hand VS cursor:pointer 問題說明：firefox不支持hand，但ie支持pointer ，兩者都是手形指示。 解決

20、方法：統(tǒng)一使用pointer。 innerText的問題 問題說明：innerText在IE中能正常工作，但是innerText在FireFox中卻不行。 解決方法：在非IE瀏覽器中使用textContent代替innerText。 示例： if(navigator.appName.indexOf(”Explorer”) -1) document.getElementById(”element”).innerText = “my text”; else document.getElementById(”element”).textContent = “my text”; 注 innerHTML

21、 同時(shí)被ie、firefox等瀏覽器支持，其他的，如outerHTML等只被ie支持，最好不用。 對象寬高賦值問題 問題說明：FireFox中類似 obj.style.height = imgObj.height 的語句無效。 解決方法：統(tǒng)一使用 obj.style.height = imgObj.height + “px”; Table操作問題 問題說明：ie、firefox以及其它瀏覽器對于 table 標(biāo)簽的操作都各不相同，在ie中不允許對table和tr的innerHTML賦值， 使用js增加一個tr時(shí)，使用appendChild方法也不管用。 解決方法： /向table追加一個空行： var row = otable.insertRow(-1); var cell = document.createElement(”td”); cell.innerHTML = “”; cell.className = “XXXX”; row.appendChild(cell); 注 由于俺很少使用JS直接操作表格，這個問題沒有遇見過。建議使用JS框架集來操作table，如JQuery。 ul和ol列表縮進(jìn)問題 消除ul、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫