IE与Firefox的CSS兼容大全~~论坛推荐～！！！
?
IE與Firefox的CSS兼容大全
作者:AYI 日期:2006-10-25
1.DOCTYPE 影響 CSS 處理
2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行
3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行
7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以
? 8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照? menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}
重復定義的話按照最后一個來執行，所以不可以只寫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}
關于這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了！：）
11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}
就能解決大部分問題
??? 注意事項：
1、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經設置為float:left;)<#div id=\"floatA\" >
<#div id=\"floatB\" >
<#div id=\"NOTfloatC\" >
這里的NOTfloatC并不希望繼續平移，而是希望往下排。
這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。
在<#div class=\"floatB\">
<#div class=\"NOTfloatC\">
之間加上<#div class=\"clear\">
這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。
并且將clear這種樣式定義為為如下即可：.clear{
clear:both;}
此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;
當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義：.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin加倍的問題。
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。
解決方案是在這個div里面加上display:inline;
例如：
<#div id=\"imfloat\">
相應的css為
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/}
3、關于容器的包涵關系
很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
4、關于高度的問題
如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎么回事）
5、最狠的手段 - !important;
如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對于"!important"會自動優先解析,然而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開發上面的一些區別
?
2006-10-13 11:19:32
?
大中小
開發準備工作
相關有價值的網站
中文firefox開發論壇地址 http://www.firefox.net.cn/newforum
討論IE與Netscape區別的 http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/
http://www.w3schools.com/
firefox開發工具
javascript 控制臺(firefox工具中)
dom inspector (forefox工具中，需要安裝的時候選擇自定義安裝-開發工具)
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()在這之前已被實現
firefox
document.body.onload = inject();
有人說標準是：
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下編寫事件處理函數是很麻煩的事.
因為FireFox并沒有 window.event . 如果要得到 event 對象,就必須要聲明時間處理函數的第一個參數為event.
所以為了兼容IE與FireFox,一般的事件處理方法為:
btn.οnclick=handle_btn_click;
function handle_btn_click(evt)
{
if(evt==null)evt=window.event;//IE
//處理事件.
}
對于簡單的程序,這不算麻煩.
但對于一些復雜的程序,某寫函數根本就不是直接與事件掛鉤的.如果要把event傳進該參數,那么所有的方法都要把event傳來傳去..這簡直就是噩夢.
下面介紹一個解決這個麻煩事的方法,與原理.
JScript中，函數的調用是有一個 func.caller 這個屬性的.
例如
function A()
{
B();
}
function B()
{
alert(B.caller);
}
如果B被A調用,那么B.caller就是A
另外,函數有一個arguments屬性. 這個屬性可以遍歷函數當前執行的參數:
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的個數與調用方有關,而與函數的參數定義沒有任何關系)
根據這兩個屬性,我們可以得到第一個函數的event對象:
btn.οnclick=handle_click;
function handle_click()
{
showcontent();
}
function showcontent()
{
var evt=SearchEvent();
if(evt&&evt.shiftKey)//如果是基于事件的調用,并且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變為handle_click .
handle_click 被 FireFox 調用, 雖然沒有定義參數,但是被調用時,第一個參數就是event,所以handle_click.arguments[0]就是event !
針對上面的知識,我們可以結合 prototype.__defineGetter__ 來實現 window.event 在 FireFox 下的實現:
下面給出一個簡單的代碼.. 有興趣的可以補充
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)的父元素的區別
因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.
IE
obj.parentElement
firefox
obj.parentNode
?
asp.net中UniqueID和clientID的區別
要使用document.getElementById 方法，則使用控件的時候要這樣來作
"javascript:OnSelectSubCatalog(\""+subCatalog_drp.ClientID+"\","+catalogIDX+","+catID.ToString()+")";
?
調用Select元素的區別
移出一個選擇項
--------------------------------------------------------------------------------
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，所以建議統一使用pointer。
?
?
?
?
?
?
?
?
?
?
?
?
[quote="PeterLee"][size=18][color=blue]WEB兼容性問題真的會讓你瘋掉：Javascript的IE和Firefox兼容性匯編[/color][/size]
在DHTML中，當我們想要動態添加元素的事件處理的時候，我們一般會這樣子來做:
[對象].[事件] = [處理函數]
在PowerStation的JS注入代碼為例,當body的Onload事件出發時，我們要執行Inject()函數，代碼如下:
document.body.onload = inject;? //Function inject()在這之前已被實現
我在實際應用的時候發現它在Firefox下不工作，當我改成這個樣子才行:
document.body.onload = inject();
當然，如果是這個樣子，它在IE下面又不工作了，呵呵。
我可不想對MS和W3C的標準有什么看法，只好自己辛苦一點:
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版腳本。
還有一個小小的差別也導致我debug了一小會，那就是innerText,我發現原來在IE下的語句
link.href = 'http://bbs.hit.edu.cn/bbsqry.php?userid=' + link.innerText;
在Firefox下會被處理為'...userid=undefined'，后來用Firefox的DOM查看器才發現，在Firefox所在的非微軟體系中，沒有innerText屬性，只有innerHTML,所以改為
link.href = 'http://bbs.hit.edu.cn/bbsqry.php?userid=' + link.innerHTML;
就OK了，兩邊瀏覽器都好用:)
標準寫法應該是：
document.body.οnlοad=new Function('inject()');
其實，這樣是在此定義了一個方法，并把指針給了 onload，在此方法中，調用了函數 inject。很多情況下，我們可以不用判斷瀏覽器，而使用兩者都兼容的語句，比如：
從 select 中刪除第一個 option，不要使用 options 集合，firefox 不認，而用 document.getElementById('selectName').remove(0);
加option，要先創建一個 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)現有問題：
??????? 現有代碼中存在許多 document.formName.item("itemName") 這樣的語句，不能在 MF 下運行
??? (2)解決方法：
??????? 改用 document.formName.elements["elementName"]
??? (3)其它
??????? 參見 2
2. 集合類對象問題
??? (1)現有問題：
??????? 現有代碼中許多集合類對象取用時使用 ()，IE 能接受，MF 不能。
??? (2)解決方法：
??????? 改用 [] 作為下標運算。如：document.forms("formName") 改為 document.forms["formName"]。
??????? 又如：document.getElementsByName("inputName")(1) 改為 document.getElementsByName("inputName")[1]
??? (3)其它
3. window.event
??? (1)現有問題：
??????? 使用 window.event 無法在 MF 上運行
??? (2)解決方法：
??????? MF 的 event 只能在事件發生的現場使用，此問題暫無法解決。可以這樣變通：
??????? 原代碼(可在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 調用沒有給參數)，則仍然只能在IE中運行，但不會出錯。所以，這種方案 tpl 部分仍與老代碼兼容。
4. HTML 對象的 id 作為對象名的問題
??? (1)現有問題
??????? 在 IE 中，HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用。在 MF 中不能。
??? (2)解決方法
??????? 用 getElementById("idName") 代替 idName 作為對象變量使用。
5. 用idName字符串取得對象的問題
??? (1)現有問題
??????? 在IE中，利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象，在MF 中不能。
??? (2)解決方法
??????? 用 getElementById(idName) 代替 eval(idName)。
6. 變量名與某 HTML 對象 id 相同的問題
??? (1)現有問題
??????? 在 MF 中，因為對象 id 不作為 HTML 對象的名稱，所以可以使用與 HTML 對象 id 相同的變量名，IE 中不能。
??? (2)解決方法
??????? 在聲明變量時，一律加上 var ，以避免歧義，這樣在 IE 中亦可正常運行。
??????? 此外，最好不要取與 HTML 對象 id 相同的變量名，以減少錯誤。
??? (3)其它
??????? 參見 問題4
7. event.x 與 event.y 問題
??? (1)現有問題
??????? 在IE 中，event 對象有 x, y 屬性，MF中沒有。
??? (2)解決方法
??????? 在MF中，與event.x 等效的是 event.pageX。但event.pageX IE中沒有。
??????? 故采用 event.clientX 代替 event.x。在IE 中也有這個變量。
??????? event.clientX 與 event.pageX 有微妙的差別（當整個頁面有滾動條的時候），不過大多數時候是等效的。
??????? 如果要完全一樣，可以稍麻煩些：
??????? mX = event.x ? event.x : event.pageX;
??????? 然后用 mX 代替 event.x
??? (3)其它
??????? event.layerX 在 IE 與 MF 中都有，具體意義有無差別尚未試驗。
8. 關于frame
?? (1)現有問題
???????? 在 IE中 可以用window.testFrame取得該frame，mf中不行
?? (2)解決方法
???????? 在frame的使用方面mf和ie的最主要的區別是：
如果在frame標簽中書寫了以下屬性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通過id或者name訪問這個frame對應的window對象
而mf只可以通過name來訪問這個frame對應的window對象
例如如果上述frame標簽寫在最上層的window里面的htm里面，那么可以這樣訪問
ie： window.top.frameId或者window.top.frameName來訪問這個window對象
mf： 只能這樣window.top.frameName來訪問這個window對象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標簽
并且可以通過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內容
也都可以通過window.top.frameName.location = 'xx.htm'來切換frame的內容
關于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的下標的含義在IE和MF中不同，MF使用DOM規范，childNodes中會插入空白文本節點。
? 一般可以通過node.getElementsByTagName()來回避這個問題。
?? 當html中節點缺失時，IE和MF對parentNode的解釋不同，例如
?? <form>
?? <table>
??????? <input/>
?? </table>
?? </form>
?? MF中input.parentNode的值為form, 而IE中input.parentNode的值為空節點
? MF中節點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)
11.const 問題
? (1)現有問題:
???? 在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
? (2)解決方法:
???? 不使用 const ，以 var 代替。
12. body 對象
?? MF的body在body標簽沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在
13. url encoding
在js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不會被正常顯示以至于參數沒有正確的傳到服務器
一般會服務器報錯參數沒有找到
當然如果是在tpl中例外，因為tpl中符合xml規范，要求&書寫為&
一般MF無法識別js中的&
14. nodeName 和 tagName 問題
? (1)現有問題：
???? 在MF中，所有節點均有 nodeName 值，但 textNode 沒有 tagName 值。在 IE 中，nodeName 的使用好象
???? 有問題（具體情況沒有測試，但我的IE已經死了好幾次）。
? (2)解決方法：
???? 使用 tagName，但應檢測其是否為空。
15. 元素屬性
?? IE下 input.type屬性為只讀，但是MF下可以修改
16. document.getElementsByName() 和 document.all[name] 的問題
? (1)現有問題：
???? 在 IE 中，getElementsByName()、document.all[name] 均不能用來取得 div 元素（是否還有其它不能取的元素還不知道）。[/quote]
轉載于:https://www.cnblogs.com/flyaway007/archive/2008/09/02/1282138.html
總結
以上是生活随笔為你收集整理的IE与Firefox的CSS兼容大全~~论坛推荐～！！！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android 2.3 r1 中文 AP
- 下一篇： 鼠标指向变成英文导航（CSS）_网页代码