国产日本亚洲AV专区

<source id="6mo20"><tr id="6mo20"></tr></source>
  • <nav id="6mo20"></nav>
  • <nav id="6mo20"></nav><li id="6mo20"><tr id="6mo20"></tr></li>
    哈爾濱天苑設計公司
    首頁 | 聯系方式 | 加入收藏 | 設為首頁

    產品目錄

    聯系方式

    聯系人:余小姐
    電話:0451-6504562
    郵箱:service@5aimei.net

    站內搜索

    當前位置:首頁 >> 新聞中心 >> 正文

    解決網站在火狐和IE不兼容的情況

    編輯:哈爾濱天苑設計公司   時間:2015/01/08   字號:
    摘要:解決網站在火狐和IE不兼容的情況

    我們在網頁設計中通常都會遇到firefox和IE不兼容的情況,很多時候就是內容在IE中能顯示正常,firefox里樣式就變了?,F在做網站都要考慮到網站在FIREFOX和IE這兩種瀏覽器里面都能正常運行,有一些網站在IE里面運行正常,在FIREFOX里面就不一定了,主要是因為大家在排版的時候都以IE瀏覽器為基準,而FIREFOX則是要大家在排版都時候不能少寫表格的寬度\高度。今天就來講解一下在網頁設計過程中遇到firefox和IE不兼容的情況該如何處理。

    因為firefox顯示圖片方式不一樣,所以建議使用div+css,在css里面每個塊都要寫好margin和padding,這樣位置就不容易亂,火狐默認是左對齊,IE默認是居中,所以在css里一定要定義好。

    接下來總結一些IE和Firefox(火狐)在JavaScript方面的不兼容及統一方法。

    1、集合類對象。IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象。解決方法:統一使用[]獲取集合類對象。

    2、eval("idName")問題。IE下,,可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象;Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象。解決方法:統一用getElementById("idName")來取得id為idName的HTML對象。

    3、const問題。Firefox下,可以使用const關鍵字或var關鍵字來定義常量;IE下,只能使用var關鍵字來定義常量。解決方法:統一使用var關鍵字來定義常量。

    4、兼容firefox的 outerHTML,FF中沒有outerHtml的方法。

    5、自定義屬性問題。IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。

    6、變量名與某HTML對象ID相同的問題。IE下,HTML對象的ID可以作為document的下屬對象變量名直接使用;Firefox下則不能.Firefox下,可以使用與HTML對象ID相同的變量名;IE下則不能。解決方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML對象ID相同的變量名,以減少錯誤;在聲明變量時,一律加上var,以避免歧義。

    7、window.event問題。window.event只能在IE下運行,而不能在Firefox下運行,這是因為Firefox的event只能在事件發生的現場使用。

    8、event.srcElement問題。IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性。解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target。

    9、window.location.href問題。IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location。解決方法:使用window.location來代替window.location.href。

    10、input.type屬性問題。說明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫。

    11、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。

    12、body問題。Firefox的body在body標簽沒有被瀏覽器完全讀入之前就存在;而IE的body則必須在body標簽被瀏覽器完全讀入之后才存在。

    13、firefox與IE(parentElement)的父元素的區別。IE:obj.parentElement;firefox:obj.parentNode;解決方法: 因為firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇。

    14、cursor:hand VS cursor:pointer。firefox不支持hand,但IE支持pointer。解決方法: 統一使用pointer。

    15、FireFox中類似 obj.style.height = imgObj.height 的語句無效。解決方法: obj.style.height = imgObj.height + ''px''。

    16、模態和非模態窗口問題。IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能。解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口,如果需要將子窗口中的參數傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如:var parWin = window.opener;parWin.document.getElementById("Aqing").value = "Aqing"。

    17、事件委托方法。IE:document.body.onload = inject; //Function inject()在這之前已被實現;Firefox:document.body.onload = inject();有人說標準是:document.body.onload=new Function(''inject()'')。

    18、frame問題。以下面的frame為例:

    (1)訪問frame對象:IE:使用window.frameId或者window.frameName來訪問這個frame對象. Firefox:只能使用window.frameName來訪問這個frame對象。另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象。
    (2)切換frame內容:在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容。如果需要將frame中的參數傳回父窗口,可以在frme中使用parent來訪問父窗口。例如:parent.document.form1.filename.value="Aqing";

    19、innerText在IE中能正常工作,但是innerText在FireFox中卻不行。

    20、消除ul、ol等列表的縮進時。樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效,padding屬性對FireFox有效。

    21、CSS雙線凹凸邊框。IE:border:2px outset;FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080。

    22、CSS透明。IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF:opacity:0.6。

    23、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;。

    24、padding 問題。padding 5px 4px 3px 1px FireFox無法解釋簡寫,必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px。

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

    上一條:廣告買賣網攜手合作伙伴舉辦大拜年活動 下一條:從5個方面做好站內鏈接
    国产日本亚洲AV专区
    <source id="6mo20"><tr id="6mo20"></tr></source>
  • <nav id="6mo20"></nav>
  • <nav id="6mo20"></nav><li id="6mo20"><tr id="6mo20"></tr></li>