首頁 後端開發 php教程 ie與火狐中常見的兼容問題_PHP教程

ie與火狐中常見的兼容問題_PHP教程

Jul 22, 2016 am 09:02 AM
程式碼 相容 存在 常見 火狐 問題

  1. document.form.item 問題

  (1)現有問題:

  現有程式碼中存在許多 document.formName.item("itemName") 這樣的語句,不能在Firefox(火狐)下運作

  (2)解決方法:

  改用 document.formName.elements["elementName"]

  2. 集合類別物件問題

  (1)現有問題:

  現有程式碼中許多集合類別物件取用時使用 (),IE 能接受,Firefox(火狐)不能。

  (2)解決方法:

  改用 [] 作為下標運算。如:

  document.forms("formName") 改為 document.forms["formName"]。

  又如:

  document.getElementsByName("inputName")(1) 改為document.getElementsByName("inputName")[1]

  3. window.event

  (1)現有問題:

  使用 window.event 無法在火狐瀏覽器上執行

  (2)解決方法:

  火狐 的 event 只能在事件發生的現場使用,此問題暫無法解決。可以這樣變通:

  原程式碼(可在IE中運作):

  

...
 

  新程式碼(可在IE和火狐中運作):

  
...
 

  此外,如果新程式碼中第一行不改,與老程式碼一樣的話(即 gotoSubmit 呼叫沒有給參數),則仍然只能在IE中運行,但不會出錯。所以,這種方案 tpl 部分仍與舊程式碼相容。

  4. HTML 物件的 id 作為物件名稱的問題

  (1)現有問題

  在 IE 中,HTML 物件的 ID 可以作為 document 的下屬物件變數名稱直接使用。在火狐中不能。

  (2)解法

  用 getElementById("idName") 取代 idName 作為物件變數使用。

  5. 用idName字串取得物件的問題

  (1)現有問題

  在IE中,利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象,在火狐中不能。

  (2)解法

  用 getElementById(idName) 取代 eval(idName)。

  6. 變數名稱與某 HTML 物件 id 相同的問題

  (1)現有問題

  在火狐中,因為物件 id 不作為 HTML 物件的名稱,所以可以使用與 HTML 物件 id 相同的變數名,IE中能。

  (2)解法

  在宣告變數時,一律加上 var ,以避免歧義,這樣在 IE 中亦可正常運作。

此外,最好不要取與 HTML 物件 id 相同的變數名,以減少錯誤。

 

7. event.x 與 event.y 問題

(1)現有問題

在IE 中,event 物件有 x, y 屬性,火狐中沒有。

(2)解決方法

在火狐中,與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與火狐中都有,具體意義有無差別尚未試驗。

8. 關於frame

(1)現有問題

在 IE中 可以用window.testFrame取得該frame,火狐中不行

(2)解決方法

在frame的使用方面火狐和ie的最主要的區別是:

如果在frame標籤中寫了以下屬性:

那麼ie可以透過id或name存取這個frame對應的window物件而火狐只可以透過name來存取這個frame對應的window物件例如如果上述frame標籤寫在最上層的window裡面的htm裡面,那麼可以這樣訪問ie:window.top.frameId或window.top.frameName來存取這個window物件

火狐:只能這樣window.top.frameName來存取這個window物件

另外,在火狐和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/目錄下面的測試

9. 在火狐中,自己定義的屬性必須getAttribute()取得

10.在火狐中沒有 parentElement parement.children 而用

parentNode parentNode.childNodes childNodes的下標的意思在IE和火狐中不同,火狐使用DOM規範,childNodes中會插入空白文字節點。

一般可以透過node.getElementsByTagName()來迴避這個問題。

當html中節點缺失時,IE和火狐對parentNode的解釋不同,例如






火狐中input.parentNode的值為form, 而IE中input.parentNode的值為空節點

火狐中節點沒有removeNode方法,必須使用以下方法 node.parentNode.removeChild(node)

11.const 問題

(1)現有問題:

在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是語法錯誤。

(2)解決方法:

不使用 const ,以 var 代替。

12. body 物件

火狐的body在body標籤沒有被瀏覽器完全讀入之前就存在,而IE則必須在body完全被讀入之後才存在

13. url encoding

在js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx'; frm.action = url那麼很有可能url不會被正常顯示以至於參數沒有正確的傳到伺服器一般會伺服器報錯參數沒有找到當然如果是在tpl中例外,因為tpl中符合xml規範,要求&書寫為& 一般火狐無法辨識js中的&

14. nodeName 和 tagName 問題

(1)現有問題:

在火狐中,所有節點都有 nodeName 值,但 textNode 沒有 tagName 值。在 IE 中,nodeName 的使用好像 有問題(具體情況沒有測試,但我的IE已經死了好幾次)。

(2)解決方法:

使用 tagName,但應偵測其是否為空。

15. 元素屬性

IE下 input.type屬性為唯讀,但火狐下方可以修改

16. document.getElementsByName() 和 document.all[name] 的問題

(1)現有問題:

在 IE 中,getElementsByName()、document.all[name] 都無法用來取得 div 元素(是否還有它無法取的元素還不知道)。

17.最簡單的滑鼠移過手變型的css要改了

cursor:pointer;/*ff不支援cursor:hand*/ dw8下面自動出來的也沒有hand這個屬性了,標準的是pointer

18.ff不支援濾鏡 最常見的半透明不支援。

filter: Alpha(Opacity=50); /* for IE */
opacity: .5;/* for Firefox */

style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"

19.ff不支援expression 例如去掉連結的邊框要分別寫不同的css

a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */

20.ff不支援div捲軸的顏色設置,目前還沒有找到替換的 好方法。

.contendiv {
position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;
line-height:120%;text-align:left; font-family:"宋體";word-break : break-all; color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
這個在ff裡面完全沒有效果了。

21.ie下方顯示在文字下方橫線的

border-width: 0px 0px 1px 0px;在ff裡面跑到文字上面去了。 (查了手冊還是沒有找到解決的辦法感覺莫名奇妙~~ 原來是ff的容錯能力太差了,是下面的width: 186px;height: 0px;寬高引起的,其實a:haver已經繼承了上級的屬性了,只要定義不同的樣式就可以了,看來ff有助於製作標準化,簡潔化的網頁啊,對css的理解也更深刻,對提供css來說是個很好的幫助)

.onelinksdiv a:hover {
display: block;border-style: solid;color: #ff0000;border-width: 0px 0px 1px 0px;
/*
display: block;border-style: solid; border-width: 0px 0px 1px 0px; width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right; */
}

//下面的寫法在ie下面正常,但在ff下是錯誤的

.onelinksdiv a:hover {

display: block;border: #ff0000 solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
}

相關參考資料:

border-width:border-top-width border-right-width border-bottom-width border-left-width; p#fourborders
{
border-width:thick medium thin 12px;
}

如果定義四個值,那麼這四個值就分別是上,右,下,左邊框的寬度值(從上邊框開始,以逆時針的順序遍歷).

等價於下面的定義

p#fourborders

{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}

22.ff不支援

scroll屬性

必須定義overflow:hidden;而且要在html標籤下,不能在 body下

html{
overflow:hidden;
}

23.ff不支援資料島綁定

在ie下可以載入進數據,但到了火狐就載入不進數據了,開始以為可能是因為內容行文字太多導致不能斷行不能加載,但刪除只剩下幾個字以後一樣不行。

24.style="word-break:break-all"

在網頁中的單元格里的內容超出一行時,在ie瀏覽器裡定義的換行樣式能夠正常使用,但在firefox裡卻不能被支持了.style="word-break:break-all"是MS擴充的IE專有屬性,並未成為W3C標準,因而Firefox 還不能支援它。不過MS已經將其提交到了W3C,而在W3C的CSS3的候選方案中也能看到它。希望這個屬性在被W3C最終定案的為CSS3標準 後,Firefox可以支援吧。這之前,可以試試
style="table-layout:fixed;word-wrap: break-word" (當它是英文的時候就不能正常換行了)

25.目前FF2.0為止都不支援IE的name錨點

像這種寫法都是不支持的:go back
原來根據W3C的語法,標籤總是會尋找href位址並跳轉過去,現在onclick事件與###這個位址又有衝突。

為了讓Firefox與IE部分元素屬性相容,那個費勁,我無意中發現 Firefox對空格敏感:

//有空格,錨點作用
//無空格,錨點無法運作
錨點的寫法又十分講究,例如
,Firefox不支援錨點,得加上id=#1
靜態同頁引用時必須這樣寫:
就不行****態頁面要用JS

後遺症來了,考慮到滑鼠樣式和瀏覽器相容又開始折騰:

//不相容
//不相容
//沒有{...},屬於腳本的非法書寫
//沒照顧到自訂系統滑鼠樣式的使用者
我以為火狐瀏覽器使用的人很多,但從網站的統計分析來看火狐只有可憐的3.18%,但兼容他的標準確花費不少精力!不過標準化有利於以後的維護和擴展,有利於技術的持續提示。
-->

問題十四:OVERFLOW-Y:auto;OVERFLOW-X:hidden;在IE裡面可以用no表示隱藏,但在FireFox(火狐)裡面必須用hidden

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/371859.htmlTechArticle1. document.form.item 問題(1) 現有問題:現有程式碼中存在許多document.formName .item(itemName) 這樣的語句,不能在Firefox(火狐)下運作(2)解決方法: 改...
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1653
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1251
29
C# 教程
1224
24
藍色畫面代碼0x0000001怎麼辦 藍色畫面代碼0x0000001怎麼辦 Feb 23, 2024 am 08:09 AM

藍屏代碼0x0000001怎麼辦藍屏錯誤是電腦系統或硬體出現問題時的一種警告機制,代碼0x0000001通常表示出現了硬體或驅動程式故障。當使用者在使用電腦時突然遇到藍色畫面錯誤,可能會感到驚慌失措。幸運的是,大多數藍色畫面錯誤都可以透過一些簡單的步驟來排除和處理。本文將為讀者介紹一些解決藍屏錯誤代碼0x0000001的方法。首先,當遇到藍色畫面錯誤時,我們可以嘗試重

GE通用遠端程式碼可在任何裝置上編程 GE通用遠端程式碼可在任何裝置上編程 Mar 02, 2024 pm 01:58 PM

如果您需要遠端編程任何設備,這篇文章會為您帶來幫助。我們將分享編程任何設備的頂級GE通用遠端代碼。通用電氣的遙控器是什麼? GEUniversalRemote是一款遙控器,可用於控制多個設備,如智慧電視、LG、Vizio、索尼、藍光、DVD、DVR、Roku、AppleTV、串流媒體播放器等。 GEUniversal遙控器有各種型號,具有不同的功能和功能。 GEUniversalRemote最多可以控制四台設備。頂級通用遙控器代碼,可在任何裝置上編程GE遙控器配備一組代碼,使其能夠與不同設備配合。您可

主機板上的數位音訊輸出介面-SPDIF OUT 主機板上的數位音訊輸出介面-SPDIF OUT Jan 14, 2024 pm 04:42 PM

主機板上SPDIFOUT連接線序最近我遇到了一個問題,就是關於電線的接線順序。我上網查了一下,有些資料說1、2、4對應的是out、+5V、接地;而有些資料則說1、2、4對應的是out、接地、+5V。最好的方法是查看你的主機板說明書,如果找不到說明書,你可以使用萬用電表進行測量。首先找到接地,然後就可以確定其他的接線順序了。主機板vdg怎麼接線連接主機板的VDG接線時,您需要將VGA連接線的一端插入顯示器的VGA接口,另一端插入電腦的顯示卡VGA接口。請注意,不要將其插入主機板的VGA介面。完成連接後,您可以

解決代碼0xc000007b錯誤 解決代碼0xc000007b錯誤 Feb 18, 2024 pm 07:34 PM

終止代碼0xc000007b在使用電腦時,有時會遇到各種各樣的問題和錯誤代碼。其中,終止代碼最為令人困擾,尤其是終止代碼0xc000007b。這個程式碼表示某個應用程式無法正常啟動,給用戶帶來了不便。首先,我們來了解終止碼0xc000007b的意思。這個程式碼是Windows作業系統的錯誤代碼,通常發生在32位元應用程式嘗試在64位元作業系統上執行時。它表示應

如何使用Copilot產生程式碼 如何使用Copilot產生程式碼 Mar 23, 2024 am 10:41 AM

身為一名程式設計師,對於能夠簡化程式設計體驗的工具,我感到非常興奮。借助人工智慧工具的幫助,我們可以產生演示程式碼,並根據需求進行必要的修改。在VisualStudioCode中新引入的Copilot工具讓我們能夠創建具有自然語言聊天互動的AI生成程式碼。透過解釋功能,我們可以更好地理解現有程式碼的含義。如何使用Copilot產生程式碼?要開始,我們首先需要取得最新的PowerPlatformTools擴充。要實現這一點,你需要進入擴充頁面,搜尋“PowerPlatformTool”,然後點擊Install按鈕

學習Python繪圖的速成指南:繪製冰墩墩的程式碼實例 學習Python繪圖的速成指南:繪製冰墩墩的程式碼實例 Jan 13, 2024 pm 02:00 PM

快速上手Python繪圖:畫出冰墩墩的程式碼範例Python是一種簡單易學且功能強大的程式語言,透過使用Python的繪圖庫,我們可以輕鬆實現各種繪圖需求。在本篇文章中,我們將使用Python的繪圖庫matplotlib來畫出冰墩墩的簡單圖形。冰墩墩是一隻擁有可愛形象的熊貓,非常受小朋友的喜愛。首先,我們需要安裝matplotlib函式庫。你可以透過在終端運行

藍色畫面代碼0x000000d1代表什麼問題? 藍色畫面代碼0x000000d1代表什麼問題? Feb 18, 2024 pm 01:35 PM

0x000000d1藍屏程式碼是什麼意思近年來,隨著電腦的普及和網路的快速發展,作業系統的穩定性和安全性問題也日益凸顯。一個常見的問題是藍色畫面錯誤,代碼0x000000d1是其中之一。藍色畫面錯誤,或稱為“藍色畫面死機”,是當電腦遇到嚴重系統故障時發生的情況。當系統無法從錯誤中恢復時,Windows作業系統會顯示一個藍色的螢幕,並在螢幕上顯示錯誤代碼。這些錯誤代

建立並執行Linux'.a”文件 建立並執行Linux'.a”文件 Mar 20, 2024 pm 04:46 PM

在Linux作業系統中處理檔案需要使用各種命令和技術,使開發人員能夠有效率地建立和執行檔案、程式碼、程式、腳本和其他東西。在Linux環境中,擴展名為”.a”的檔案作為靜態庫具有重要的重要性。這些程式庫在軟體開發中發揮重要作用,允許開發人員有效地管理和共享多個程式的公共功能。對於Linux環境中的有效軟體開發,了解如何建立和運行「.a」檔案至關重要。本文將介紹如何全面安裝和設定Linux「.a」文件,讓我們一起探索Linux「.a」文件的定義、用途、結構,以及建立和執行它的方法。什麼是L

See all articles