IE と Firefox 間の一般的な互換性の問題_PHP チュートリアル

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の使用はFirefoxブラウザでは実行できません

(2)解決策:

Firefoxのイベントはイベントが発生する場面でしか使えない この問題はまだ解決できていません。次のように変更できます:

元のコード (IE で実行可能):

...

新しいコード (IE および Firefox で動作):

...

さらに、新しいコードの最初の行が変更されず、古いコードと同じである場合（つまり、gotoSubmit 呼び出しでパラメータが与えられない場合）、引き続き IE でのみ実行されますが、エラーは発生しません。したがって、このソリューションの tpl 部分は依然として古いコードと互換性があります。

4. HTMLオブジェクトのIDをオブジェクト名として使用する問題

(1)既存の問題点

IEではHTMLオブジェクトのIDをそのままドキュメントの下位オブジェクトの変数名として利用できます。 Firefox にはありません。

(2)解決策

オブジェクト変数として idName の代わりに getElementById("idName") を使用します。

5. idName 文字列を使用したオブジェクトの取得に関する問題

(1)既存の問題点

IEではeval(idName)を使ってid idNameのHTMLオブジェクトを取得できますが、Firefoxではできません。

(2)解決策

eval(idName)の代わりにgetElementById(idName)を使用してください。

6. 変数名がHTMLオブジェクトのIDと同じである問題

(1)既存の問題点

Firefoxでは、オブジェクトIDはHTMLオブジェクトの名前として使用されないため、IEで動作するHTMLオブジェクトIDと同じ変数名を使用できます。

(2)解決策

変数を宣言するときは、あいまいさを避けるために常に var を追加して、IE で正常に実行できるようにします。

さらに、エラーを減らすために、HTML オブジェクト ID と同じ変数名を使用しないことをお勧めします。

7. Event.x と events.y の問題

(1)既存の質問

IE では、イベント オブジェクトには x、y 属性がありますが、Firefox にはありません。

(2)解決策

Firefox では、event.x に相当するのは、event.pageX です。ただし、event.pageX は IE では使用できません。したがって、event.x の代わりに、event.clientX が使用されます。この変数はIEにも存在します。 events.clientX と events.pageX (ページ全体にスクロール バーがある場合) には微妙な違いがありますが、ほとんどの場合は同等です。

まったく同じにしたい場合は、もう少し手間がかかります: mX =event.x ?event.x :event.pageX 次に、event.x の代わりに mX を使用します。

(3)その他

event.layerX は IE と Firefox に存在し、具体的な違いがあるかどうかはまだテストされていません。

8.フレームについて

(1)既存の質問

IE では、window.testFrame を使用してフレームを取得できますが、Firefox では取得できません

(2)解決策

フレームの使用に関する Firefox と IE の主な違いは次のとおりです:

frameタグに以下の属性が記述されている場合:

すると、IE は ID または名前を通じてこのフレームに対応するウィンドウ オブジェクトにアクセスできますが、Firefox は名前を通じてのみこのフレームに対応するウィンドウ オブジェクトにアクセスできます。たとえば、上記のフレーム タグがトップ ウィンドウ内の htm に記述されている場合、次に、このウィンドウ オブジェクトにアクセスするには、次のように IE にアクセスします: window.top.frameId または window.top.frameName

Firefox: このウィンドウ オブジェクトには window.top.frameName を通じてのみアクセスできます

さらに、Firefox と IE の両方で、window.top.document.getElementById("frameId") を使用してフレーム タグにアクセスし、window.top.document.getElementById("testFrame").src = 'xx.htm を使用できます。 ' フレームの内容を切り替えるには、window.top.frameName.location ='xx.htm' を使用してフレームの内容を切り替えることもできます。フレームとウィンドウの説明については、「ウィンドウとフレーム」の記事を参照してください。 bbs と /test/js/test_frame の / ディレクトリ下のテスト

9. Firefox では、定義した属性は getAttribute() を通じて取得する必要があります

10. Firefox にはparentElement parement.children はありませんが、

parentNodeparentNode.childNodes childNodesの添え字の意味はIEとFirefoxでは異なります。FirefoxではDOM仕様となっており、childNodesには空のテキストノードが挿入されます。

この問題は通常、node.getElementsByTagName() を使用して回避できます。

HTML でノードが欠落している場合、IE と Firefox はparentNode を異なる方法で解釈します。例えば

<入力/>
Firefox の input.parentNode の値は form ですが、IE の input.parentNode の値は空のノードです

FirefoxにはノードのremoveNodeメソッドがありません。次のメソッドnode.parentNode.removeChild(node)を使用する必要があります

11.const問題

(1)既存の質問:

constキーワードはIEでは使用できません。 const constVar = 32; など。これは IE の構文エラーです。

(2)解決策:

const を使用せず、代わりに var を使用してください。

12. ボディオブジェクト

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

13. URLエンコード

js で URL を記述する場合は、直接記述しないでください。たとえば、 var url = 'xx.jsp?objectName=xx&objectEvent=xxx'; となる可能性が高くなります。 URL は正常に表示されず、パラメーターが正しくありません。サーバーに送信されると、サーバーは通常、パラメーターが見つからないことを報告します。これは、tpl が XML に準拠しているためです。通常、Firefox は js 内の & を認識できません。

14. ノード名とタグ名の問題

(1)既存の質問:

Firefoxでは、すべてのノードにnodeName値がありますが、textNodeにはtagName値がありません。 IE では、nodeName の使用に問題があるようです (具体的な状況はテストされていませんが、私の IE は何度か停止しました)。

(2)解決策:

tagName を使用しますが、それが空かどうかを検出する必要があります。

15. 要素の属性

input.type 属性は IE では読み取り専用ですが、Firefox では変更できます

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 はフィルターをサポートしていません。最も一般的な半透明はサポートされていません。

フィルター: Alpha(Opacity=50); /* IE の場合 */

不透明度: .5;/* 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は式をサポートしていません。例えば、リンクの境界線を削除するには、別のCSSを記述する必要があります

a,area { blr:expression(this.onFocus=this.blur()) } /* IE の場合 */

:focus { アウトライン: なし } /* Firefox の場合 */

;

20.ff は div スクロール バーのカラー設定をサポートしていません。現時点では、これを置き換える良い方法はありません。

.content {

位置: 絶対; 上: 10ピクセル; 高さ: 135ピクセル; line-height:120%;text-align:left; font-family:"宋体";word-break:break-all;

オーバーフロー-Y:自動;オーバーフロー-X:いいえ; スクロールバーの矢印の色: 赤; スクロールバーのトラックの色: #F6F6F6; スクロールバーの影の色: #F6F6F6; スクロールバー-ダークシャドウ-カラー:#F6F6F6;スクロールバー-3Dライト-カラー:#F6F6F6;スクロールバー-ハイライト-カラー:#F6F6F6;

}
FFでは全く効果がありません。

21.ie、テキストの下に水平線が表示されます

border-width: 0px 0px 1px 0px; ff のテキストに移動します。 （マニュアルを確認しましたが、解決策が見つかりませんでした。不思議な感じがします～～ ffの耐障害性が低すぎることが判明しました。これは、幅: 186px; 高さ: 0px; が原因であることがわかりました。実際には、 a:haver は優れた属性を継承しており、さまざまなスタイルを定義するだけで、CSS の理解が深まり、CSS を提供するのに役立ちます。
.onelinksdiv a:hover {
表示: ブロック;ボーダー スタイル: ソリッド;カラー: #ff0000;ボーダー幅: 0px 0px 1px 0px

; /*

表示: ブロック;ボーダー スタイル: ソリッド; ボーダー幅: 0px 0px 1px 0px; 幅: 186px; 高さ: 0px; フォント サイズ: 14px; テキスト整列: 右; */

}

//以下の書き方はieでは正常ですが、ffでは間違っています

.onelinksdiv a:hover {
表示: ブロック;ボーダー: #ff0000 ボーダー幅: 0px 0px 1px 0px; 幅: 186px;高さ: 0px; カラー: #ff0000; フォントサイズ: 14px; テキスト整列: 右; }

関連資料:

border-width:border-top-width border-right-width border-bottom-width border-left-width p#fourborders

{

ボーダー幅:太中細 12px; }

4 つの値が定義されている場合、これらの 4 つの値は、上、右、下、左の境界線の幅の値になります (上の境界線から開始して反時計回りの順に移動します)。
以下の定義と同等

p #フォーボーダーズ

{

ボーダー上部の幅:太い
ボーダー右幅:中
ボーダーの下の幅:細い
ボーダー左の幅:12px; }

22.ff は スクロール属性をサポートしません

overflow:hidden は body の下ではなく html タグの下に定義する必要があります

html{
オーバーフロー:非表示
}

23.ff はデータアイランドバインディングをサポートしていません

IE ではデータを読み込むことができますが、Firefox ではデータを読み込めないのではないかと最初は考えました。コンテンツ行が大きすぎるため、行を分割することはできず、ロードすることもできませんが、数語を削除しただけでは同じことはできません。

24.style="ワードブレイク:ブレイクオール"

Webページ内のセルの内容が1行を超える場合、IEブラウザで定義されている改行スタイルは通常使用できますが、Firefoxではstyle="word-break:break-all"はサポートされていません。拡張された IE 固有のプロパティは W3C 標準になっていないため、Firefox はまだサポートしていません。ただし、MS はこれを W3C に提出しており、W3C の CSS3 候補計画にも見られます。 W3C によって CSS3 標準として最終決定された後、Firefox がこのプロパティをサポートできることを願っています。その前に、ぜひお試しください
style="table-layout:fixed;word-wrap:break-word" (英語の場合は正常に折り返せません)

25. 現在、FF2.0はIEの名前アンカーをサポートしていません

次のような記述はサポートされていません: 戻る W3C 構文によれば、 タグは常に href アドレスを検索し、そこにジャンプすることがわかりました。onclick イベントは ### アドレスと競合します。

Firefox を IE の一部の要素属性と互換性を持たせるために、Firefox がスペースに敏感であることを偶然発見しました。

//スペースがあり、アンカーポイントが機能します

スペースがないため、アンカーポイントは効果がありません
アンカーポイントの書き方は非常に特殊で、 のようになります。Firefox はアンカーポイントをサポートしていないため、id=#1 を追加する必要があります
同じページを静的に参照する場合は、次のように記述する必要があります: 、機能しません*** *ステータスページはJSを使用する必要があります

後遺症はここにあります。マウスのスタイルとブラウザの互換性を考慮して、私は再び投げ始めました:

//{...} がないとスクリプトの不正な記述になります

; システムのマウス スタイルをカスタマイズするユーザーを考慮していませんでした
; Firefox を使用している人はたくさんいると思っていましたが、Web サイトの統計分析によると、Firefox は 3.18% しかなく、標準に準拠するには多大な努力が必要です。ただし、標準化は将来のメンテナンスと拡張に役立ち、テクノロジーを継続的に思い出させるのに役立ちます。
-->

質問 14: OVERFLOW-Y:auto;OVERFLOW-X:hidden; IE では no を使用して非表示にできますが、FireFox では hidden を使用する必要があります

http://www.bkjia.com/PHPjc/371859.html

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/371859.html技術記事 1. document.form.item の問題 (1) 既存の問題: 既存のコードには document.formName.item(itemName) のようなステートメントが多数あり、Firefox では実行できません (2) 解決策: 変更... .