IE与Firefox的CSS兼容大全~~论坛推荐～！！！
?
IE與Firefox的CSS兼容大全
作者:AYI 日期:2006-10-25
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) 方可居中
4.FF: 設(shè)置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設(shè)一個 height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行
7.cursor: pointer 可以同時在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以
? 8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時設(shè)置 float: left 保證不換行。參照? menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯位, 若不設(shè) height, 可以在 menubar 中插入一個空格。
9.在mozilla firefox和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:0 10px 0 10px;}
div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
關(guān)于這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了！：）
11.ul標(biāo)簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}
就能解決大部分問題
??? 注意事項：
1、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)<#div id=\"floatA\" >
<#div id=\"floatB\" >
<#div id=\"NOTfloatC\" >
這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。
這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。
在<#div class=\"floatB\">
<#div class=\"NOTfloatC\">
之間加上<#div class=\"clear\">
這個div一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤?#xff0c;而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關(guān)系，否則會產(chǎn)生異常。
并且將clear這種樣式定義為為如下即可：.clear{
clear:both;}
此外，為了讓高度能自動適應(yīng)，要在wrapper里面加上overflow:hidden;
當(dāng)包含float的box的時候，高度自動適應(yīng)在IE下無效，這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義：.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin加倍的問題。
設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug。
解決方案是在這個div里面加上display:inline;
例如：
<#div id=\"imfloat\">
相應(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-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
?
?
?
?
?
?
?
?
firefox與IE瀏覽器在web開發(fā)上面的一些區(qū)別
?
2006-10-13 11:19:32
?
大中小
開發(fā)準(zhǔn)備工作
相關(guān)有價值的網(wǎng)站
中文firefox開發(fā)論壇地址 http://www.firefox.net.cn/newforum
討論IE與Netscape區(qū)別的 http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/
http://www.w3schools.com/
firefox開發(fā)工具
javascript 控制臺(firefox工具中)
dom inspector (forefox工具中，需要安裝的時候選擇自定義安裝-開發(fā)工具)
http://www.hacksrus.com/~ginda/venkman/
以下所有IE指IE6.0
驗證是否是IE瀏覽器(來之于google js)
var agt=navigator.userAgent.toLowerCase();
var is_ie=(agt.indexOf("msie")!=-1 && document.all);
正式開始
事件委托方法
IE
document.body.onload = inject; //Function inject()在這之前已被實現(xiàn)
firefox
document.body.onload = inject();
有人說標(biāo)準(zhǔn)是：
document.body.οnlοad=new Function('inject()');
在firefox無法取得event.srcElement
通過其他方式傳遞對象
if(isIE)
thistable.attachEvent("onmousedown",OnClickChangeTdBackColor);
//thistable.οnmοusedοwn=OnClickChangeTdBackColor;
else//deal firefox
{
for(var i=0;i<thistable.rows.length;i++)
{
var rowObj = thistable.rows[i];
for( var j=0;j<rowObj.cells.length;j++)
{
var cellObj = rowObj.cells[j];
cellObj.setAttribute("onmousedown","OnClickChangeTdBackColor(this)");
}
//alert(rowObj.cells[0].tagName);
}
}
這是來之 http://blog.joycode.com/lostinet/archive/2005/02/27/44999.aspx
在FireFox下編寫事件處理函數(shù)是很麻煩的事.
因為FireFox并沒有 window.event . 如果要得到 event 對象,就必須要聲明時間處理函數(shù)的第一個參數(shù)為event.
所以為了兼容IE與FireFox,一般的事件處理方法為:
btn.οnclick=handle_btn_click;
function handle_btn_click(evt)
{
if(evt==null)evt=window.event;//IE
//處理事件.
}
對于簡單的程序,這不算麻煩.
但對于一些復(fù)雜的程序,某寫函數(shù)根本就不是直接與事件掛鉤的.如果要把event傳進該參數(shù),那么所有的方法都要把event傳來傳去..這簡直就是噩夢.
下面介紹一個解決這個麻煩事的方法,與原理.
JScript中，函數(shù)的調(diào)用是有一個 func.caller 這個屬性的.
例如
function A()
{
B();
}
function B()
{
alert(B.caller);
}
如果B被A調(diào)用,那么B.caller就是A
另外,函數(shù)有一個arguments屬性. 這個屬性可以遍歷函數(shù)當(dāng)前執(zhí)行的參數(shù):
function myalert()
{
var arr=[];
for(var i=0;i
arr[i]=myalert.arguments[i];
alert(arr.join("-"));
}
alert("hello","world",1,2,3)
就能顯示 hello-world-1-2-3
(arguments的個數(shù)與調(diào)用方有關(guān),而與函數(shù)的參數(shù)定義沒有任何關(guān)系)
根據(jù)這兩個屬性,我們可以得到第一個函數(shù)的event對象:
btn.οnclick=handle_click;
function handle_click()
{
showcontent();
}
function showcontent()
{
var evt=SearchEvent();
if(evt&&evt.shiftKey)//如果是基于事件的調(diào)用,并且shift被按下
window.open(global_helpurl);
else
location.href=global_helpurl;
}
function SearchEvent()
{
func=SearchEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event) // 如果就是event 對象
return arg0;
}
func=func.caller;
}
return null;
}
這個例子使用了SearchEvent來搜索event對象. 其中 'Event' 是 FireFox 的 event.constructor .
在該例子運行時,
SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以 func=func.caller 時,func變?yōu)閔andle_click .
handle_click 被 FireFox 調(diào)用, 雖然沒有定義參數(shù),但是被調(diào)用時,第一個參數(shù)就是event,所以handle_click.arguments[0]就是event !
針對上面的知識,我們可以結(jié)合 prototype.__defineGetter__ 來實現(xiàn) window.event 在 FireFox 下的實現(xiàn):
下面給出一個簡單的代碼.. 有興趣的可以補充
if(window.addEventListener)
{
FixPrototypeForGecko();
}
function FixPrototypeForGecko()
{
HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);
window.constructor.prototype.__defineGetter__("event",window_prototype_get_event);
Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement);
}
function element_prototype_get_runtimeStyle()
{
//return style instead...
return this.style;
}
function window_prototype_get_event()
{
return SearchEvent();
}
function event_prototype_get_srcElement()
{
return this.target;
}
function SearchEvent()
{
//IE
if(document.all)
return window.event;
func=SearchEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event)
return arg0;
}
func=func.caller;
}
return null;
}
</body></html>
?
?
?
firefox與IE(parentElement)的父元素的區(qū)別
因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.
IE
obj.parentElement
firefox
obj.parentNode
?
asp.net中UniqueID和clientID的區(qū)別
要使用document.getElementById 方法，則使用控件的時候要這樣來作
"javascript:OnSelectSubCatalog(\""+subCatalog_drp.ClientID+"\","+catalogIDX+","+catID.ToString()+")";
?
調(diào)用Select元素的區(qū)別
移出一個選擇項
--------------------------------------------------------------------------------
IE ：sel.options.remove(sel.selectedIndex);
firefox ：
增加選擇項：
--------------------------------------------------------------------------------
IE: subCatalog.add(new Option(text,value));
firefox:
var opnObj = document.createElement("OPTION");
//opnObj.id = optionID;
opnObj.value = value;
opnObj.text = text;
subCatalog.appendChild(opnObj);
cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer，所以建議統(tǒng)一使用pointer。
?
?
?
?
?
?
?
?
?
?
?
?
[quote="PeterLee"][size=18][color=blue]WEB兼容性問題真的會讓你瘋掉：Javascript的IE和Firefox兼容性匯編[/color][/size]
在DHTML中，當(dāng)我們想要動態(tài)添加元素的事件處理的時候，我們一般會這樣子來做:
[對象].[事件] = [處理函數(shù)]
在PowerStation的JS注入代碼為例,當(dāng)body的Onload事件出發(fā)時，我們要執(zhí)行Inject()函數(shù)，代碼如下:
document.body.onload = inject;? //Function inject()在這之前已被實現(xiàn)
我在實際應(yīng)用的時候發(fā)現(xiàn)它在Firefox下不工作，當(dāng)我改成這個樣子才行:
document.body.onload = inject();
當(dāng)然，如果是這個樣子，它在IE下面又不工作了，呵呵。
我可不想對MS和W3C的標(biāo)準(zhǔn)有什么看法，只好自己辛苦一點:
var agt=navigator.userAgent.toLowerCase();
var is_ie=(agt.indexOf("msie")!=-1 && document.all);
is_ie可以判斷瀏覽器是不是IE（潛臺詞是:我默認世界上只有兩種瀏覽器，除了IE之外的都是Firefox兼容性，呵呵）通過這個變量來判斷是用那個語句注冊事件處理,目前只能是這樣子了.p.s.這一小段代碼是我從Gmail的腳本中拿出來的，呵呵，再次感謝PowerStation在Lilac上Post的Gmail的beta版腳本。
還有一個小小的差別也導(dǎo)致我debug了一小會，那就是innerText,我發(fā)現(xiàn)原來在IE下的語句
link.href = 'http://bbs.hit.edu.cn/bbsqry.php?userid=' + link.innerText;
在Firefox下會被處理為'...userid=undefined'，后來用Firefox的DOM查看器才發(fā)現(xiàn)，在Firefox所在的非微軟體系中，沒有innerText屬性，只有innerHTML,所以改為
link.href = 'http://bbs.hit.edu.cn/bbsqry.php?userid=' + link.innerHTML;
就OK了，兩邊瀏覽器都好用:)
標(biāo)準(zhǔn)寫法應(yīng)該是：
document.body.οnlοad=new Function('inject()');
其實，這樣是在此定義了一個方法，并把指針給了 onload，在此方法中，調(diào)用了函數(shù) inject。很多情況下，我們可以不用判斷瀏覽器，而使用兩者都兼容的語句，比如：
從 select 中刪除第一個 option，不要使用 options 集合，firefox 不認，而用 document.getElementById('selectName').remove(0);
加option，要先創(chuàng)建一個 var op = document.createElement('OPTION');document.getElementById('selectName').appendChild(op);并且，加入之后再賦值，否則 IE 不顯示，如下，op.value='a';op.text='atext';
以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox
1. document.form.item 問題
??? (1)現(xiàn)有問題：
??????? 現(xiàn)有代碼中存在許多 document.formName.item("itemName") 這樣的語句，不能在 MF 下運行
??? (2)解決方法：
??????? 改用 document.formName.elements["elementName"]
??? (3)其它
??????? 參見 2
2. 集合類對象問題
??? (1)現(xiàn)有問題：
??????? 現(xiàn)有代碼中許多集合類對象取用時使用 ()，IE 能接受，MF 不能。
??? (2)解決方法：
??????? 改用 [] 作為下標(biāo)運算。如：document.forms("formName") 改為 document.forms["formName"]。
??????? 又如：document.getElementsByName("inputName")(1) 改為 document.getElementsByName("inputName")[1]
??? (3)其它
3. window.event
??? (1)現(xiàn)有問題：
??????? 使用 window.event 無法在 MF 上運行
??? (2)解決方法：
??????? MF 的 event 只能在事件發(fā)生的現(xiàn)場使用，此問題暫無法解決?？梢赃@樣變通：
??????? 原代碼(可在IE中運行)：
??????????? <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/>
??????????? ...
??????????? <script language="javascript">
??????????????? function gotoSubmit() {
??????????????????? ...
??????????????????? alert(window.event);??? // use window.event
??????????????????? ...
??????????????? }
??????????? </script>
??????? 新代碼(可在IE和MF中運行)：
??????????? <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/>
??????????? ...
??????????? <script language="javascript">
??????????????? function gotoSubmit(evt) {
??????????????????? evt = evt ? evt : (window.event ? window.event : null);
??????????????????? ...
??????????????????? alert(evt);???????????? // use evt
??????????????????? ...
??????????????? }
??????????? </script>
??????? 此外，如果新代碼中第一行不改，與老代碼一樣的話(即 gotoSubmit 調(diào)用沒有給參數(shù))，則仍然只能在IE中運行，但不會出錯。所以，這種方案 tpl 部分仍與老代碼兼容。
4. HTML 對象的 id 作為對象名的問題
??? (1)現(xiàn)有問題
??????? 在 IE 中，HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用。在 MF 中不能。
??? (2)解決方法
??????? 用 getElementById("idName") 代替 idName 作為對象變量使用。
5. 用idName字符串取得對象的問題
??? (1)現(xiàn)有問題
??????? 在IE中，利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象，在MF 中不能。
??? (2)解決方法
??????? 用 getElementById(idName) 代替 eval(idName)。
6. 變量名與某 HTML 對象 id 相同的問題
??? (1)現(xiàn)有問題
??????? 在 MF 中，因為對象 id 不作為 HTML 對象的名稱，所以可以使用與 HTML 對象 id 相同的變量名，IE 中不能。
??? (2)解決方法
??????? 在聲明變量時，一律加上 var ，以避免歧義，這樣在 IE 中亦可正常運行。
??????? 此外，最好不要取與 HTML 對象 id 相同的變量名，以減少錯誤。
??? (3)其它
??????? 參見 問題4
7. event.x 與 event.y 問題
??? (1)現(xiàn)有問題
??????? 在IE 中，event 對象有 x, y 屬性，MF中沒有。
??? (2)解決方法
??????? 在MF中，與event.x 等效的是 event.pageX。但event.pageX IE中沒有。
??????? 故采用 event.clientX 代替 event.x。在IE 中也有這個變量。
??????? event.clientX 與 event.pageX 有微妙的差別（當(dāng)整個頁面有滾動條的時候），不過大多數(shù)時候是等效的。
??????? 如果要完全一樣，可以稍麻煩些：
??????? mX = event.x ? event.x : event.pageX;
??????? 然后用 mX 代替 event.x
??? (3)其它
??????? event.layerX 在 IE 與 MF 中都有，具體意義有無差別尚未試驗。
8. 關(guān)于frame
?? (1)現(xiàn)有問題
???????? 在 IE中 可以用window.testFrame取得該frame，mf中不行
?? (2)解決方法
???????? 在frame的使用方面mf和ie的最主要的區(qū)別是：
如果在frame標(biāo)簽中書寫了以下屬性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通過id或者name訪問這個frame對應(yīng)的window對象
而mf只可以通過name來訪問這個frame對應(yīng)的window對象
例如如果上述frame標(biāo)簽寫在最上層的window里面的htm里面，那么可以這樣訪問
ie： window.top.frameId或者window.top.frameName來訪問這個window對象
mf： 只能這樣window.top.frameName來訪問這個window對象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標(biāo)簽
并且可以通過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內(nèi)容
也都可以通過window.top.frameName.location = 'xx.htm'來切換frame的內(nèi)容
關(guān)于frame和window的描述可以參見bbs的‘window與frame’文章
以及/test/js/test_frame/目錄下面的測試
----adun 2004.12.09修改
9. 在mf中，自己定義的屬性必須getAttribute()取得
10.在mf中沒有? parentElement parement.children? 而用
?????????????? parentNode parentNode.childNodes
?? childNodes的下標(biāo)的含義在IE和MF中不同，MF使用DOM規(guī)范，childNodes中會插入空白文本節(jié)點。
? 一般可以通過node.getElementsByTagName()來回避這個問題。
?? 當(dāng)html中節(jié)點缺失時，IE和MF對parentNode的解釋不同，例如
?? <form>
?? <table>
??????? <input/>
?? </table>
?? </form>
?? MF中input.parentNode的值為form, 而IE中input.parentNode的值為空節(jié)點
? MF中節(jié)點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)
11.const 問題
? (1)現(xiàn)有問題:
???? 在 IE 中不能使用 const 關(guān)鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
? (2)解決方法:
???? 不使用 const ，以 var 代替。
12. body 對象
?? MF的body在body標(biāo)簽沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在
13. url encoding
在js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不會被正常顯示以至于參數(shù)沒有正確的傳到服務(wù)器
一般會服務(wù)器報錯參數(shù)沒有找到
當(dāng)然如果是在tpl中例外，因為tpl中符合xml規(guī)范，要求&書寫為&
一般MF無法識別js中的&
14. nodeName 和 tagName 問題
? (1)現(xiàn)有問題：
???? 在MF中，所有節(jié)點均有 nodeName 值，但 textNode 沒有 tagName 值。在 IE 中，nodeName 的使用好象
???? 有問題（具體情況沒有測試，但我的IE已經(jīng)死了好幾次）。
? (2)解決方法：
???? 使用 tagName，但應(yīng)檢測其是否為空。
15. 元素屬性
?? IE下 input.type屬性為只讀，但是MF下可以修改
16. document.getElementsByName() 和 document.all[name] 的問題
? (1)現(xiàn)有問題：
???? 在 IE 中，getElementsByName()、document.all[name] 均不能用來取得 div 元素（是否還有其它不能取的元素還不知道）。[/quote]
轉(zhuǎn)載于:https://www.cnblogs.com/flyaway007/archive/2008/09/02/1282138.html
總結(jié)
以上是生活随笔為你收集整理的IE与Firefox的CSS兼容大全~~论坛推荐～！！！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android 2.3 r1 中文 AP
- 下一篇： ASP.NET MVC 重点教程一周年版