IEとFirefoxのjsの違い_基礎知識

1.firefox は innerText をサポートできません。
Firefox は innerHTML をサポートしますが、innerText はサポートしません。innerText を実装するために textContent をサポートしますが、余分なスペースもデフォルトで保持されます。 textContent が使用されない場合、文字列に HTML コードが含まれていない場合は、代わりに innerHTML を使用できます。

2. Web コンテンツの選択を禁止します:
通常、IE では js を使用します: obj.onselectstart=function(){return false;}
Firefox は CSS:-moz-user-select:none

を使用します

3. フィルターのサポート (例: 透明フィルター):
IE:フィルター:アルファ(不透明度=10);
Firefox:-moz-opacity:.10;

4. イベントをキャプチャします:
IE: obj.setCapture()、obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);

5. マウスの位置を取得します:
IE: イベント.クライアントX、イベント.クライアントY
Firefox: イベントオブジェクトを渡すにはイベント関数が必要です
obj.onmousemove=function(ev){
X=ev.pageX;Y=ev.pageY;
}

6. DIV とその他の要素の境界問題:
例: div::{width:100px;height:100px;border:#000000 1px Solid;}
の CSS を設定します。 IEの場合: div幅(境界線の幅を含む): 100px、divの高さ(境界線の幅を含む): 100px; そしてFirefox: divの幅(境界線の幅を含む): 102px、divの高さ(境界線の幅を含む): 102px;
したがって、IE と Firefox と互換性のあるこのドラッグ ウィンドウを作成する場合、js と css を記述するときに頭を使う必要があります。ここで 2 つのヒントを紹介します。

1. ブラウザの種類を決定します:

var isIE=document.all? true:false;

変数を書きました。 document.all 構文がサポートされている場合は isIE=true、そうでない場合は isIE=false

2. 異なるブラウザでの CSS 処理:

一般に、! important を使用して CSS ステートメントの使用を優先することができます (Firefox でのみサポートされています)

例: {border-width:0px! important;border-width:1px;}
Firefox では、この要素には枠線がありません。IE では、枠線の幅は 1px
です。
1.document.formName.item("itemName") の問題

問題の説明: IE では document.formName.item("itemName") または document.formName.elements ["elementName"] を使用できますが、Firefox では document.formName.elements["elementName"] のみを使用できます。 。

解決策: document.formName.elements["elementName"] を一律に使用します。

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") を一律に使用して、ID が idName である HTML オブジェクトを取得します。

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

問題の説明: IE では、HTML オブジェクトの ID をドキュメントの下位オブジェクトの変数名として直接使用できますが、Firefox では使用できません。Firefox では、HTML オブジェクト ID と同じ変数名を使用できます。ただしIEではそうではありません。

回避策: document.idName の代わりに document.getElementById("idName") を使用します。エラーを減らすために、同じ HTML オブジェクト ID を持つ変数名を使用しないことをお勧めします。変数を宣言するときは、あいまいさを避けるために常に var キーワードを追加してください。

6.const問題

問題の説明: Firefox では、const キーワードまたは var キーワードを使用して定数を定義できますが、IE では、var キーワードのみを使用して定数を定義できます。

解決策: 定数を定義するには、一律に var キーワードを使用します。

7.input.type 属性の問題

問題の説明: IE の input.type 属性は読み取り専用ですが、Firefox の input.type 属性は読み取り/書き込み可能です。

解決策: input.type 属性を変更しないでください。変更する必要がある場合は、最初に元の入力を非表示にしてから、同じ位置に新しい入力要素を挿入します。

8.window.event の問題

問題の説明: window.event は IE でのみ実行でき、Firefox では実行できません。これは、Firefox のイベントがイベントが発生する場面でのみ使用できるためです。

解決策: イベントが発生する関数にイベント パラメーターを追加し、関数本体で var myEvent = evt?evt:(window.event?window.event:null)
を使用します (仮パラメーターが evt であると仮定します)。 例:

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

function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}

9.Event.x およびevent.y の問題 問題の説明: IE では偶数オブジェクトに x 属性と y 属性がありますが、pageX 属性と pageY 属性はありません。Firefox では偶数オブジェクトに pageX 属性と pageY 属性がありますが、x 属性と y 属性はありません。

解決策: var myX =event.x ?event.pageX ?event.y:event.pageY;
質問 8 を考慮する場合は、event の代わりに myEvent を使用してください。

10.event.srcElement の問題

問題の説明: IE では、even オブジェクトには srcElement 属性がありますが、target 属性はありません。Firefox では、even オブジェクトには target 属性がありますが、srcElement 属性はありません。

解決策: srcObj =event.srcElement ?event.srcElement:event.target;
を使用します。 質問 8 を考慮する場合は、event の代わりに myEvent を使用してください。

11.window.location.href の問題

問題の説明: IE または Firefox2.0.x では window.location または window.location.href を使用できますが、Firefox1.5.x では window.location のみを使用できます。

回避策: window.location.href の代わりに window.location を使用します。もちろん、 location.replace() メソッドの使用を検討することもできます。

12. モーダルウィンドウと非モーダルウィンドウの問題

問題の説明: IE では、showModalDialog および showModelessDialog を通じてモーダルおよび非モーダル ウィンドウを開くことができますが、Firefox ではこれを行うことができません。

解決策: window.open(pageURL,name,parameters) を直接使用して、新しいウィンドウを開きます。
子ウィンドウのパラメータを親ウィンドウに戻す必要がある場合は、子ウィンドウで window.opener を使用して親ウィンドウにアクセスできます。親ウィンドウで子ウィンドウを制御する必要がある場合は、var subWindow = window.open(pageURL,name,parameters); を使用して、新しく開かれたウィンドウ オブジェクトを取得します。

13.Frame と iframe の問題

次のフレームを例として取り上げます:

(1)フレームオブジェクト
にアクセスします IE: このフレーム オブジェクトにアクセスするには、window.frameId または window.frameName を使用します。 Firefox: このフレーム オブジェクトにアクセスするには、window.frameName を使用します。 解決策: このフレーム オブジェクトにアクセスするには、一律に window.document.getElementById("frameId") を使用します。
(2) フレームコンテンツの切り替え
IE と Firefox の両方で、window.document.getElementById("frameId").src = "xxx.html" または window.frameName.location = "xxx.html" を使用してフレームのコンテンツを切り替えることができます。 フレーム内のパラメータを親ウィンドウに戻す必要がある場合は、フレーム内でparentキーワードを使用して親ウィンドウにアクセスできます。

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

[注意]この問題は実際に検証されていないため、検証後に修正されます。

[注意] IE6、Opera9、FireFox2 では上記の問題が発生しないことが確認されています。単純な JS スクリプトは、要素がまだ読み込まれていない場合でも、スクリプトより前に読み込まれているすべてのオブジェクトと要素にアクセスできます。

15. イベントデリゲートメソッド

問題の説明: IE では、関数 inject() が以前に実装されている document.body.onload = inject; を使用します。Firefox では、 document.body.onload = inject();

を使用します。 解決策: document.body.onload=new Function('inject()'); または document.body.onload = function(){/* を使用します */}
【注意】Functionとfunctionの違い

16. アクセスされる親要素の違い

問題の説明: IE では、obj.parentElement または obj.parentNode を使用して、obj の親ノードにアクセスします。Firefox では、obj.parentNode を使用して、obj の親ノードにアクセスします。

解決策: Firefox と IE は両方とも DOM をサポートしているため、obj.parentNode は obj の親ノードにアクセスするために一律に使用されます。

17.cursor:ハンド VS カーソル:ポインター
問題の説明: Firefox はハンドをサポートしていませんが、IE はポインターをサポートしています。どちらもハンド命令です。

解決策: ポインタを一律に使用します。

18.インナーテキストの問題
問題の説明: innerText は IE では正常に動作しますが、innerText は FireFox では動作しません。

解決策: IE 以外のブラウザでは innerText の代わりに textContent を使用します。

例:

コードをコピー


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

if(navigator.appName.indexOf("エクスプローラー") >-1){
document.getElementById('element').innerText = "私のテキスト"; } else{
document.getElementById('element').textContent = "私のテキスト"; }

[注意] innerHTML は IE や Firefox などのブラウザでも同時にサポートされていますが、outerHTML などの他のブラウザは IE でのみサポートされているため、使用しないことをお勧めします。

19. オブジェクトの幅と高さの割り当ての問題

問題の説明: obj.style.height = imgObj.height のようなステートメントは FireFox では無効です。

解決策: obj.style.height = imgObj.height 'px';
を使用します。
20. テーブル操作の問題

問題の説明: IE、Firefox、およびその他のブラウザーでは、table タグに対する操作が異なります。IE では、js を使用して tr を追加する場合、appendChild メソッドが機能しません。

解決策:

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

//空の行をテーブルに追加します:

var row = otable.insertRow(-1); var cell = document.createElement("td"); cell.innerHTML = ""; cell.className = "XXXX"; row.appendChild(セル);


[メモ] 私はJSを使って直接テーブルを操作することはほとんどないので、この問題に遭遇したことはありません。テーブル操作にはJQueryなどのJSフレームワークの利用を推奨します。

21. ul リストと ol リストのインデント問題
ul や ol などのリストのインデントを削除する場合、スタイルは list-style:none;margin:0px;padding:0px; のように記述する必要があります。 margin 属性は IE で有効であり、padding 属性は FireFox で有効です。 ← この文は表現が間違っています、詳しくは↓
をご覧ください [注意]この問題は実際に検証されていないため、検証後に修正されます。

[注意] IE では、margin:0px を設定すると、リストの上下左右のインデント、空白、リスト番号またはドットが削除されることが確認されています。パディングの設定は、Firefox のスタイルには影響しません。 margin:0px を設定すると、上下のインデントのみを削除できます。padding:0px を設定した後は、左右のインデントのみを削除できます。リストの番号またはドットを削除するには、list-style:none も設定する必要があります。つまり、IE では最終的な効果を得るために margin:0px のみを設定できますが、Firefox では最終的な効果を得るために margin:0px、padding:0px、list-style:none を同時に設定する必要があります。

22. CSS の透明性の問題

IE: フィルター:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

ＦＦ：不透明度：０．６。
【注意】両方書いて下にopacity属性を入れるのがベストです。

23.CSSの角丸問題
IE: IE7 より前のバージョンは角丸をサポートしていません。

FF: -moz-border-radius:4px、または -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-半径-bottomright:4px;。

[注意] 角丸の問題は CSS の古典的な問題であり、角丸を設定するには JQuery フレームセットを使用し、これらの複雑な問題は他の人に任せることをお勧めします。

CSS には問題が多すぎて、同じ CSS 定義でもページ規格が異なれば表示効果も異なります。開発に沿った提案としては、IE などの主流ブラウザを考慮して、テーブルの使用を減らし、CSS 定義をできる限り標準 DOM に基づいてページを作成する必要があります。 、Firefox、Opera。ところで、多くの場合、FF と Opera の CSS 解釈標準は CSS 標準に近く、より規範的です。