WEBブラウザ対応 おすすめコレクション_JavaScriptスキル

必ずしも完全ではなく、不正確な部分もあるかもしれません。例えば、新しくリリースされた IE8 や Chrome などについてはあまり取り上げられていませんが、最近のプロジェクトは IE8 や Chrome などにも対応していますが、まとめられていません。あとは、忘れていただけです…汗。一緒にゆっくり改善していきましょう。

JavaScript 部分

1. document.form.item の問題
問題:
document.formName.item がコード ("itemName") は FF
では実行できません。 解決策:
代わりに document.formName.elements["elementName"] を使用してください。 2. コレクション オブジェクトに関する問題
問題:
コード内の多くのコレクション オブジェクトは、アクセスするときに () を使用します。IE はこれを受け入れることができますが、FF は受け入れられません。 代わりに、次の標準算術演算として [] を使用します。例: document.getElementsByName ("inputName")(1) は
document.getElementsByName("inputName")[1]



3. window .event に変更されます。
window.event を使用すると FF では実行できません
解決策: FF のイベントは、イベントが発生するシーンでのみ使用できます。この問題はまだ解決できません。この問題は、イベントを関数に渡すことで回避できます。 onMouseMove = "functionName(event)"
function functionName (e) {
e = e window.event;
.. ... .
}


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

問題:
IE では、 HTML オブジェクトはドキュメントの下位オブジェクトとして使用できます。変数名は直接使用され、FF では使用できません。
解決策: オブジェクト変数を使用する場合は、すべて標準の getElementById("idName")
5. idName 文字列を使用してオブジェクトを取得する 問題

問題:
IE では、eval("idName") を使用して ID を持つ HTML オブジェクトを取得できます。 idName ですが、FF にはありません
解決策:
eval("idName") の代わりに getElementById("idName ") を使用します
6 変数名が同じであるという問題。 HTML オブジェクト ID

問題:
FF では、オブジェクト ID が機能しないため、HTML オブジェクトの名前なので、HTML オブジェクト ID と同じ変数名を使用できません。 IE の場合:
変数を宣言するときは、あいまいさを避けるために常に var を追加します。
を実行するときは、HTML オブジェクト ID と同じ変数名を使用しないことをお勧めします。エラーを減らすため
7.event.x とevent.y の問題

問題:
IE では、イベント オブジェクトには x、y 属性がありますが、 がありません。そのため、event.x の代わりに、event.clientX が使用されます。 IEの
event.clientXとevent.pageXにもこの変数があります。微妙な違いがあります。つまり、スクロールバー
は次のようになります。mX = event.x ?event.x :event.pageX;次に、event.x


の代わりに mX を使用します。 8. フレーム

の問題については、
を使用できます。 IE で使用される window.testFrame はフレームを取得しますが、FF では機能しません
解決策:
window.top.document.getElementById("testFrame").src = 'xx.htm'
window .top.frameName.location = 'xx.htm'

9. 要素の属性を取得します
FF では、定義した属性は getAttribute()

10. FF にはparentElement、parement.children はありませんが、parentNode、parentNode.childNodes

問題:
childNodes の添字の意味が IE と FF で異なります。空白のテキスト ノードが FF の childNodes に挿入されます
解決策: この問題は、node.getElementsByTagName() を使用して回避できます。問題:
HTML 内のノードが欠落している場合、IE とFF は、parentNode を別の方法で解釈します。例:

FF の input.parentNode の値は form ですが、IE の input.parentNode の値は空のノードです
問題:
FF のノードには独自のノードがありませんdeleteNode メソッド
解決策:
次のメソッドを使用する必要があります。node.parentNode.removeChild(node)

11. const の問題
問題:
キーワードは IE では使用できません
解決策:


を var 12 に置き換えます。 body オブジェクト
FF の本体は、body タグが完全に読み取られる前に存在します。ブラウザは必須ですが、IE は本文が完全に読み取られた後にのみ存在します
これにより、IE ではドキュメントが読み込まれていない場合、本文に appendChild を実行すると空白のページが表示されるという問題が発生します
解決策:
本体にすべてを挿入します。 ノードのアクションはすべて onload 後に実行されます。

13. URL エンコード
問題:
通常、FF は js 内の &
を認識できません。 :
js で URL を記述する場合は、単に記述してください。ただし、IE では、textNode に tagName 値がありません。nodeName
の使用に問題があります。解決策:
tagName を使用します。空かどうかを確認する必要があります
15. 要素の属性

IE の input.type 属性は読み取り専用ですが、FF

16. document.getElementsByName() と document.all[name]
の問題:IE では、getElementsByName() も document.all[name] も使用できません。 div 要素
他にも取得できない要素があるかどうかは不明です (この問題はまだ議論があり、研究中です) )

17. サブフレーム内の要素の呼び出しに関する問題または他のフレーム
IE では、次のメソッドを使用してサブ要素
document.getElementById ("frameName").(document.)elementName
window.frames の値を取得できます。 ["frameName"].elementName
を FF で実行するには、IE と互換性のある次の形式に変更する必要があります:
window.frames[ "frameName"].contentWindow.document.elementNamewindow .frames["frameName"].document.elementName

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

問題:
obj.style.height = imgObj に似たステートメント。 FireFox の高さは無効です
解決策:
一律に obj.style.height = imgObj.height "px";
を使用します。 19. innerText の問題

問題:
innerText は IE では正常に動作しますが、innerText は FireFox では動作しません
解決策:
IE 以外のブラウザでは innerText の代わりに textContent を使用してください
20.event.srcElement に関する問題およびevent.toElement

問題:
IEでは偶数オブジェクトにsrcElement属性がありますが、target属性がありません;Firefoxでは偶数オブジェクトにtarget属性がありますが、srcElement属性がありません
解決策:
var target = e.target || e.srcElement;
21. >
問題:
FF は CSS で無効にする必要があり、IE は JS で無効にする必要があります
解決策:
IE: obj.onselectstart = function() {return false ;}
FF : -moz-user-select:none;

22. イベントのキャプチャ
問題:
FF には setCapture() メソッドまたは releaseCapture() メソッドがありません
解決策:
IE:
obj.setCapture();
obj.releaseCapture();
FF:window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event .MOUSEMOVE|Event. MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event .MOUSEUP);
}



CSS 部分



div クラス



1. センタリングの問題
IE では div 内のコンテンツがデフォルトで中央揃えになりますが、FF ではデフォルトで左揃えになります。コード margin:auto を追加してみてください。

2. 高さの問題
2 つの div が上下に配置されているか、入れ子になっています。div 内の実際のコンテンツが設定された高さよりも大きい場合、2 つの div は FF では重なり合います。下の div はオーバーラップします。 div は上の div のためのスペースを自動的に作成します。
したがって、レイヤーの重なりを避けるために、高さを適切に制御するか、単純に高さを記述せずに自動的に調整する必要があります。 height:100%;ただし、この div の最初のレベルの要素がすべて float の場合は、div ブロックの最後と閉じる前に、底がくぼんだ空の div を追加する必要があります。対応する CSS は次のとおりです。 .float_bottom {clear:both; height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}


3. clear:both;
float の影響を受けたくない場合は、clear:both;

4. IE 浮動マージンによって生成される 2 倍の距離を記述します。

#box {
float:left;
width:100px;margin:0 0 0 100px; //この場合、IE は 200px の距離を生成しますdisplay; :inline; //float を無視します
}

5. パディングの問題
FF がパディングを設定すると、div は高さと幅を増加させますが、IE は増加しません (* 標準の XHTML1.0 定義の dtd は一貫しているようです)
高さを適切に制御するか、height:100% を使用してみてください。
幅を減らすには、パディングを使用してください
しかし、実際の経験によると、一般的に FF と IE のパディングには大きな違いはありません。 div の実際の幅 = width パディングなので、div の全幅とパディングを記述します。幅は、実際に必要な幅からパディングを減算することで定義されます。

6 パディングとマーラインの問題。 FF で div がネストされている場合の y 軸
y 軸上の子 div と親 div の間の距離は、IE では親 div と親 div の間の距離です。 y 軸は親のパディングです。IE では、子 div と親 div の間の距離は、親パディングと子マージンの大きい方になります。また、border=0 の場合、子 div と親 div の間の距離は 0 になります。 、子マージンは親 div の外側で動作します


7. パディング、マージン、高さ、幅に対する愚かな解決策
これはメソッドではなくスキルであることに注意してください: 標準ヘッダーを記述します



できるだけ高いパディングを使用し、マージンは慎重に使用してください、高さは 100% を追加するようにしてください、親の高さは固定値の子の高さがある場合、 100% を使用しないでください。すべての子がフローティングの場合は、下部に空のスペースを追加します。両方の div をできるだけ広くし、幅を正確に計算してパディング

リスト クラス

1. FF ではデフォルトで ul タグにパディング値がありますが、IE ではマージンのみが値を持ちます

ul first {margin:0;padding:0;}
2. ul および ol リストのインデントの問題

ul、ol およびその他のリストのインデントを削除する場合、スタイルは次のように記述する必要があります: { list-style:none;margin:0px;padding:0px;}
Display class

1。 ,inline two elements

display:block; //インライン要素をブロック要素としてシミュレートできますdisplay:inline //同じ行に配置された効果を実現しますdisplay:table; //FF の場合、テーブル効果をシミュレートします。
display:block ブロック要素の特徴は次のとおりです。
は常に新しい行で始まり、
高さ、行の高さ、上下のマージンを制御できます。
幅を設定しない限り、デフォルトの幅はコンテナの 100% です

、
、
、

、

、

はブロック要素

の例ですdisplay:inline は、要素をインライン要素として表示します。

と他の要素は同じ行にあります。
• の高さ、行の高さ、上下の余白は変更できません。 width はテキストまたは画像の幅であり、変更できません。
  
  、
  、
  、
  、、、 はインライン要素の例です 2. マウスの指のようなもの表示
  標準の書き込みカーソルを使用します: ポインター
  背景、画像カテゴリ
  
  
  1. 背景表示の問題
  幅と高さの属性を完了するように注意してください
  2. 背景の透明度の問題
  
  IE: フィルター: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60) ;
  IE: filter: alpha(opacity=10);FF: opacity:0.6;FF: -moz-opacity:0.10;
  両方書いて不透明度属性を入れるのがベストです下に