IE と Firefox の間の JavaScript の非互換性の問題に対する解決策の概要_javascript スキル

1.firefox の externalHTML を互換し、FF には outerHtml を持たないメソッド。 🎜>
if (window.HTMLElement) {

HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=this.ownerDocument.createRange(); r.setStartBefore(this); var df=r.createContextualFragment(sHTML); return sHTML; HTMLElement.prototype.__defineGetter__("outerHTML",function() { var attr;

var attrs=this.attributes;

var str="for (var i=0;iattr=attrs[i];
if(attr.specified)
str =" " attr.name ' ="' attr.value '"';
if(!this.canHaveChildren)
return str ">"; " this.tagName.toLowerCase() ">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "エリア":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case " input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true ;
});
}



2.集合类对象问题

说明:IE下、可使用()または[]获取集合类对象;Firefox下、只能[]获取集合类对オブジェクトを使用します。
解法: 统一使用[]获取集合类对オブジェクト。

3.独自のプロパティ问题

説明:IE では、定期的にプロパティを取得する方法を使用して、独自のプロパティを取得できます。また、getAttribute() を使用して、独自のプロパティを取得することもできます。Firefox では、 getAttribute() を使用して独自に定義されたプロパティのみを使用できます。
解決方法:getAttribute() から定義されたプロパティを取得します。


4.eval("idName")问题

说明:IE下、、eval("idName")またはgetElementById("idName")を使用してidをidNameに取得の HTML オブジェクト;Firefox では getElementById("idName") を使用して id の idName の HTML オブジェクトを取得できます。 解決方法:getElementById("idName") を使用して idName の HTML オブジェクトを取得します。
5. 量名と特定の HTML オブジェクト ID が同じであること

説明:IE では、HTML オブジェクトの ID はドキュメントの下位オブジェクトとして直接使用できます。Firefox では使用できません。 の解決方法:document.idName の代わりに document.getElementById("idName") を使用します。HTML オブジェクト ID と同じ変数名を使用する必要はありません。警告を最小限に抑え、リスクを回避するために、リスクを回避するために、変数を追加します。
6.const问题

说説明:Firefox では、const关键字または var关键字来定常量を使用できます。IE では、var关键字来定常量を使用できます。
解決方法: var关键字来定义常量。 7.input.type プロパティ问题

说説明:IE下input.typeプロパティは只读;ただし、Firefox下input.typeプロパティは读写。
8.window.event问题
说明:window.event だけは IE の下で実行できますが、Firefox の下では実行できません。これは Firefox のイベントのみでイベント発生中の现场です使用します。
解法:
IE:


复制代
代码如下:
< ;input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
を使用します。 IE&Firefox:

复制代


代码如下:


< ;input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...

を使用します。
9.Event.x およびevent.y の問題
説明: IE では、偶数オブジェクトには x、y 属性がありますが、Firefox では偶数オブジェクトに pageX、pageY 属性がありません。オブジェクトには pageX、pageY 属性がありますが、x、y 属性はありません。
解決策: mX (mX =event.x?event.x:event.pageX;) を使用して IE またはevent.pageXのevent.xを置き換えます。

10.event.srcElement の問題
説明: IE では偶数オブジェクトに srcElement 属性がありますが、Firefox では偶数オブジェクトに target 属性がありません。 target 属性はありますが、 srcElement 属性はありません。
解決策: IE ではevent.srcElement、Firefoxではevent.targetの代わりにobj (obj =even.srcElement ?event.srcElement:event.target;)を使用します。 >11.window .location.href の問題
説明: IE または Firefox2.0.x では window.location または window.location.href を使用できますが、Firefox1.5.x ではのみ使用できます。 window.location. 解決策: window.location.href の代わりに window.location を使用します。

12. モーダル ウィンドウと非モーダル ウィンドウの問題
注: IE ではモーダルを使用できます。 showModalDialog および showModelessDialog を通じて開くことができます。モーダルおよび非モーダル ウィンドウは Firefox では使用できません。解決策: window.open(pageURL, name,parameters) を直接使用して、新しいウィンドウを開きます。
子ウィンドウのパラメータを親ウィンドウに戻す必要がある場合は、子ウィンドウで window.opener を使用して親ウィンドウにアクセスできます。例: var parWin = window.opener.getElementById; ("Aqing"). value = "Aqing";

13.フレームの問題
次のフレームを例に挙げます:
(1) フレーム オブジェクトにアクセスします:
IE: このフレーム オブジェクトにアクセスするには、window.frameId または window.frameName を使用します。
Firefox: のみ可能です。このフレーム オブジェクトにアクセスするには、window.frameName を使用します。
さらに、IE と Firefox の両方で window.document.getElementById("frameId") を使用して、このフレーム オブジェクトにアクセスできます。
(2) フレーム コンテンツを切り替えます。
IE、Firefox両方で使用可能 window.document.getElementById("testFrame").src = "xxx.html" または window.frameName.location = "xxx.html" を使用してフレームの内容を切り替えます。
フレーム内のパラメータを親ウィンドウに戻す必要がある場合は、 frme のparentを使用して親ウィンドウにアクセスできます。例:parent.document.form1.filename.value="Aqing";

14.body の問題
Firefox の本体は、ブラウザと IE の本体によって body タグが完全に読み取られる前に存在します。 body タグはブラウザによって完全に読み取られた後に存在する必要があります。例:
Firefox:

コードをコピーコードは次のとおりです。

コードをコピーします

コードは次のとおりです。 ;/ body> document.body.onclick = function(evt){

evt = window.event; evt) ;

}



IE: document.body.onload = inject; ) これは
Firefox より前に実装されていました: document.body.onload = inject();
標準は次のとおりであるという人もいます:
document.body.onload=new Function('inject()');

16. firefox と IE の親要素 (parentElement) の違い IE: obj.parentElement
firefox: obj.parentNode
解決策: 両方あるためFirefox と IE は DOM をサポートしているため、obj.parentNode を使用するのが良い選択です。


17.cursor:hand VS Cursor:pointer
firefox は hand をサポートしていませんが、IE はサポートしています。 pointer 解決策: ポインタを一律に使用します


18. innerText は IE では正常に動作しますが、innerText は FireFox では動作しません。


コードをコピーします


コードは次のとおりです:
if(navigator.appName.indexOf("Explorer") > -1 ){
document.getElementById('element').innerText = "私のテキスト";

} else{ document.getElementById('element').textContent = "私のテキスト";
19. obj.style.height = imgObj.height のようなステートメントは FireFox では無効です
解決策:
obj.style.height = imgObj.height 'px';

20. IE、Firefox およびその他のブラウザーではテーブル タグに対する操作が異なります。IE では、js を使用して tr を追加する場合、appendChile メソッドを使用します。どちらも機能しません。 解決策:

コードをコピー コードは次のとおりです:

//1 つ追加しますテーブルへの空の行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " "; className = " XXXX";
row.appendChild(cell);

21. パディングの問題
padding 5px 4px 3px 1px FireFox は省略形 は、padding-top:5px; padding-bottom:3px;

に変更する必要があります。その他のリスト

スタイルは次のように記述する必要があります: list-style:none;margin:0px;padding:0px; margin 属性は IE で有効であり、padding 属性は FireFox で有効です

23. CSS 透明度

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

24. CSS 角丸

IE: 角丸はサポートされていません。 FF: -moz-border-radius:4px、または -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -ボーダー半径-右下:4px;。
25. CSS 二重線バンプボーダー

IE: border:2px offset;。 FF: -moz-border-top-colors: #d4d0c8 ホワイト;-moz-border-left-colors: #d4d0c8 ホワイト;-moz-border-right-colors:#404040 #808080;-moz-border- bottom-colors: #404040 #808080;
IE と Firefox 間の互換性に関連するいくつかの例もあります

IE と Firefox 間の非互換性に対する解決策のコレクション