1. document.formName.item("itemName") 問題の説明: IE では document.formName.item("itemName") または document.formName.elements ["elementName"] を使用できますが、Firefox ではのみ使用できます。ドキュメント .formName.elements["要素名"]。
解決策: document.formName.elements["elementName"] を一律に使用します。
2. コレクション オブジェクトの問題 説明: IE では、() または [] を使用してコレクション オブジェクトを取得できますが、Firefox では、[ ] のみを使用してコレクション オブジェクトを取得できます。
解決策: コレクション オブジェクトを取得するには、[] を一律に使用します。
3. カスタム属性の問題 説明: IE では、通常の属性を取得するメソッドを使用してカスタム属性を取得できますが、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 であると仮定します)。
例:
プログラムコード
<input type="button" onclick="doSomething(event)"/>
<スクリプト言語="javascript">
関数 doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
</script>
9. Event.x およびevent.y 問題の説明: IE では、偶数オブジェクトには x 属性と y 属性がありますが、pageX 属性と pageY 属性はありません。Firefox では、偶数オブジェクトには pageX 属性と pageY 属性がありますが、x 属性と y 属性はありません。
解決策: var myX = イベント.x ? イベント.pageX ? イベント.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. フレームと i フレームの問題では、次のフレームを例にします。
<frame src=" http://www.abc.com/123.html " id="frameId" name="frameName" />
(1) フレーム オブジェクト IE にアクセスします。window.frameId または window.frameName を使用してフレーム オブジェクトにアクセスします。
Firefox: このフレーム オブジェクトにアクセスするには、window.frameName を使用します。
解決策: このフレーム オブジェクトにアクセスするには、一律に window.document.getElementById("frameId") を使用します。
(2) フレームの内容を切り替えるには、window.document.getElementById("frameId").src = "index.html" または window.frameName.location = "index.html" を使用して、両方の IE でフレームの内容を切り替えることができます。そしてFirefox。
フレーム内のパラメータを親ウィンドウに戻す必要がある場合は、フレーム内でparentキーワードを使用して親ウィンドウにアクセスできます。
14. ボディ読み込みの問題 問題の説明: Firefox の body オブジェクトは、ブラウザによって body タグが完全に読み取られる前に存在しますが、IE の body オブジェクトは、body タグがブラウザによって完全に読み取られた後に存在する必要があります。
【注意】この問題は実際に検証されていないため、検証後に修正します。
[注意] IE6、Opera9、FireFox2 では上記の問題が発生しないことが確認されています。単純な JS スクリプトは、要素がまだ読み込まれていない場合でも、スクリプトより前に読み込まれているすべてのオブジェクトと要素にアクセスできます。
15. イベント委任メソッドの問題の説明: IE では、関数 inject() が以前に実装されていた場合、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. カーソル:ハンド VS カーソル:ポインタ
問題の説明: Firefox はハンドをサポートしていませんが、IE はポインターをサポートしています。どちらもハンド命令です。
解決策: ポインターを一律に使用します。
18. innerText の問題。
問題の説明: innerText は IE では正常に動作しますが、innerText は FireFox では動作しません。
解決策: IE 以外のブラウザでは innerText の代わりに textContent を使用します。
例:
プログラムコード
if(navigator.appName.indexOf("エクスプローラー") >-1){
document.getElementById('element').innerText = "私のテキスト";
} それ以外{
document.getElementById('element').textContent = "私のテキスト";
}
[注意] innerHTML は、IE や Firefox などのブラウザでも同時にサポートされています。outerHTML などの他のブラウザは、IE でのみサポートされているため、使用しないことをお勧めします。
19. オブジェクトの幅と高さの割り当ての問題 問題の説明: FireFox の obj.style.height = imgObj.height に似たステートメントは無効です。
解決策: obj.style.height = imgObj.height + 'px'; を一律に使用します。
20. テーブル操作の問題 問題の説明: IE、Firefox、およびその他のブラウザでは、テーブル タグに対する操作が異なりますが、これは IE では許可されていません。 table と tr の場合、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: filter: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、Firefox などの主流ブラウザを考慮して、テーブルの使用を減らし、CSS 定義をできる限り標準 DOM に基づいてページを作成する必要があります。 、オペラ。ところで、多くの場合、FF と Opera の CSS 解釈標準は CSS 標準に近く、より規範的です。