一般的なブラウザの互換性の問題と解決策
いわゆるブラウザの互換性の問題は、結果は一様ではないページ表示の場合に得られた、異なるブラウザは、コードの同じ部分に異なる解像度を持っているので参照してください。ほとんどのケースでは、我々のニーズは、当社のウェブサイトを表示したり、当社のシステムを訪問するユーザーのブラウザが表示を統一すべきかに関係なくです。ブラウザの互換性の問題は、だから、フロントエンドの開発者は、多くの場合、問題が発生しているし、対処しなければなりません。
ブラウザの互換性を学習する前に、私が欲しいのフロントエンドの開発者は、2つのカテゴリに分類されます。
最初は正確に設計開発へのフロントエンドの開発者に合わせて1ピクセルに正確であると言うことができて、彼らは、簡単に不十分なデザインを見つけることができ、そしてまれにブラウザとの互換性の問題が発生しますこれらの問題は、多くの場合、死んでバグブラウザ、および容易な維持するために自分のページのポストプロダクション、少ないコードの再利用の問題である、それは言うことができるが、よりしっかりと確実なコードです。
第二のカテゴリーは、間隔、行の高さ、位置など、デザイン、特徴点の多くの間に大きなギャップに合わせて開発するための基本的なフロントエンドの開発者とそう頻繁に貧しい絵には、いくつかのピクセルです。この効果はまだ曖昧で、特に理由も利用可能である繰り返しテストの効果を達成するために、全体的なレイアウトは非常に壊れやすいです。混乱の小さな変化。なぜあなたはまだ私はなぜ知らないコードを書くのです。このような開発者は、多くの場合、互換性の問題は、多くの場合、捕獲されました。まあ、これはブラウザと混沌別のブラウザを変更しました。見当もつかないに変更するに変更します。実際に、彼らが遭遇する互換性の問題のほとんどは、ブラウザに起因するが、その技術自体アップすべきではありません。
最初のカテゴリのための主要な記事、開発者の厳格なタイプなので、ここでは、ブラウザの観点からの主な違いは、解決するには互換性の問題を分析します。
-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ----
ブラウザの互換性の問題：別のブラウザタブは、外側と内側パッチ異なるパッチをデフォルト
問題の症状：ちょうどパターンの場合なくても、マージンとパディングは全く異なる制御、いくつかのラベルを書きます。
周波数は会った：100％
解決方法：スタイルのCSSのリセット
注：これは最も一般的であり、最も簡単に、ブラウザの互換性の問題によって解決ほぼすべてのワイルドカード*で始まるCSSファイルの内部と各タブが0であるパッチの外に設定されます。
ブラウザの互換性の問題：ブロック属性ラベルの浮き、大規模よりもIE6マージンに余裕横行、ディスプレイの設定の下に事情があります
問題の症状：一般的な症状はIE6の背後にある次の行にトップであります
遭遇頻度：90％（もう少し複雑なページは全体来て、最も一般的なブラウザの互換性の問題のフロートレイアウト）
ソリューション：フロートのラベル表示制御パターンの追加：インライン;インライン属性に変換
注：最も一般的に使用される当社は、DIV + CSSレイアウトで、我々は通常達成するためのdiv floatを使用した場合のマージンが実現した場合のdivは、典型的なブロック属性タグ、ランドスケープレイアウトは、横方向の間隔が設定されている間に、これは避けられません出会いの互換性の問題。
ブラウザの互換性に関する問題3：設定低い高さのラベル（一般的にはあまり10pxのより）、IE6、IE7、その高さの設定高さを超えた旅で
このラベルで高い制御IE6,7の程度や旅行、高さを超えて自分自身を設定します。問題の症状
遭遇頻度：60％
ソリューション：オーバーフローの高さを超える設定]タブ：隠された;以下、設定高さよりも行の高さ、または行の高さを設定します。
注：これは、我々は小さなフィレットタグを設定し、バックグラウンドで行われます。前回のIE8のブラウザは最小の行の高さの高さをタグ付けするためにデフォルト設定されますので、この問題が発生します。あなたのタグが空であっても、タグの高さは、まだデフォルトの行の高さに到達します。
ブラウザの互換性に関する問題4：横行マージン、IE6のバグピッチがあり、フロートを使用してブロックレイアウト後の状況：インライン[プロパティ]タブでは、ディスプレイを設定します
問題の症状：ピッチ比でIE6のピッチは、セットを超えて
命中率：20％
溶液：ディスプレイ：ブロック;バック追加表示：インライン;ディスプレイ：テーブルと
注：インライン属性ラベル、幅と高さを設定するために、我々はセット表示する必要があります：ブロック;（入力特別なラベルに加えて）。レイアウトとフロートと横の余白後、IE6で、彼は横マージンフロートブロック属性の後にバグを持ちます。しかし、我々は、ディスプレイを追加するので、それは、財産ラインタグ内に自身であるので：インライン、それは側面に配置することができません。今回は、ディスプレイに必要：talbe：インラインの背後にある表示を追加します。
ブラウザの互換性に関する問題5：イメージは、デフォルトの間隔を持っています
問題の症状：imgタグは、いくつかのブラウザでは、間隔デフォルト設定されます、プラス言及したワイルドカードの問題では動作しません、一緒に数回を置きます。
命中率：20％
解決方法：float型プロパティのレイアウトIMG
注：属性タグライン内のためのimgタグには、あまりにも長い間、コンテナの幅は超えないよう、IMGタグは、単一の行にランク付けされますが、IMGタグの間ブラウザピッチの一部となります。この間隔は、正しい方法フロートを削除するために使用されます
ラベル最低の高さの設定は、互換性のある最小の高さではありません：6は、ブラウザの互換性の問題
問題の症状：MIN-高さ自体はCSSプロパティと互換性がないため、最小の高さを設定するとき、さまざまなブラウザとの互換性が良くありません
ヒット確率：5％
溶液：、我々はラベル200pxの最小の高さを設定する場合のために提供される必要がある：{分の高さ：200pxの、高さ：自動重要;高:! 200pxの、オーバーフロー：目に見えます;}
注：B / Sのフロントエンドオープンシステム、我々は多くの場合、この要求を持っています。コンテンツが値未満である場合（例えば、300ピクセル）。コンテナの高さが300ピクセルで、高さはコンテンツがこの値よりも大きい場合、容器支持の高さではなく、スクロールバーよりも、高いです。今回は、この互換性の問題に直面することになります。
ブラウザの互換性はセブン発行：CSSとの互換性、透明性
行う互換ページは、各ライトコードの一部（又は行のレイアウト）我々はすべての熟練そのようなトラブルのある程度、もちろん、見異なるブラウザで互換性があります。初心者にお勧めは、多くの場合、互換性の問題が発生しました。多くの互換性の問題がある限り、我々は簡単にこれらの互換性の問題を解決するために少しを設定することができますよう、ブラウザのデフォルトの属性タグの構文解析結果が異なるためです。私たちはラベルのデフォルトプロパティに精通している場合があり、互換性の問題となり、これらの互換性の問題を解決する方法を、なぜ、あなたは十分に理解することができます。
-
/* CSS hack*/
私はめったにそれから、私はIEとの互換性がありません書き込みコードのは好きではない個人的な習慣かもしれハッカーを使用しない解決するためのハックを使用しています。しかし、ハッカーは、まだ非常に便利です。IE7と旅行;他（IE8クロームサファリFFオペラなど）IE6：私は三つのカテゴリーにハッカーブラウザを使用することができます
◆IE6の既知のハッカーは、アンダースコア_アスタリスクです*
◆IE7旅行ハッカーは、アスタリスクを知っています*
例えば、CSSの設定：
height:300px;*height:200px;_height:100px;
IE6ブラウザは、高さを読み取り：300ピクセル時は高300ピクセルで検討されます。読み、彼は認識IE6を読むときに、heihgtの高さ：競合する前に設定を上書きします200pxの時間を高さが200pxのあることを、 。IE6、上の読み取りはまた、彼は設定200pxの高が上書きされますので、高さを100pxにに設定されている、_heightを認識し、
IE7は300のピクセル設定の高さから同じ読み取りおよび旅行ダウンしています。彼らは_heightを知らないのでheight200pxは、停止する*読んだとき。彼らは200pxの高さに解決されますので、ブラウザの残りの部分は第1の高さを認識：300ピクセル;彼らは300ピクセルに解決され、高さなります。書き込みの順序が非常に重要であるので、同じ優先順位なので、紛争へのプロパティは、以前のものを上書きしますたいです。
ウェブサイトのデザインは、それが別のブラウザの問題と互換性のCSSスタイルを注意しなければならない場合には、特にネットをフルに活用するDIVのCSSの設計のために、私たちは、CSSスタイルでIE6 IE7 FFとの互換性にもっと注意を払う必要があります、またはネットワークの混乱は、表示したくない外出も効果！
すべてのブラウザの
高さ：100ピクセル;
IE6専用
_height：100ピクセル;
IE6特別
*高さ：100pxに。
IE7専用
* +高さ：100pxに。
IE7、FF共通
の高さ：100pxに重要;!
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
問題：
使用して、FFに仕事をしませwindow.event
ソリューション：
専用フィールドイベントで使用することができFFのイベントでは、この問題を一時的に解決することはできません。イベントは、仕事の周りに機能を広めることができます。
onMouseMove = "functionName(event)"
function functionName (e) {
e = e || window.event;
......
}
問題のオブジェクトの名前とID 4. HTMLオブジェクト
問題：
IEでは、下位のオブジェクト変数名としてID HTMLオブジェクトがないFFで、ドキュメントを直接使用することができます
ソリューション：
すべての標準オブジェクト変数getElementByIdを（「idName」）を使用しました
文字列で取得した対象問題idName
問題：
IEでは、（「idName」）評価を使用していないFFで、idName HTMLオブジェクトIDとして取得することができます
ソリューション：
（ "IdName"）はgetElementByIdをするにeval（ "idName"）と交換しました
6. HTMLオブジェクトIDの問題と同じ変数名
問題：
オブジェクトIDは、HTMLオブジェクトの名前はないのでFFにおいて、HTMLは、同じ変数名をオブジェクトIDと一緒に使用することができる、IEはできません
ソリューション：
正常な動作がIEでもそうという、あいまいさを避けるために、変数、およびすべてのVARを宣言する場合
はfalseを減らすために、同じ変数名のHTMLオブジェクトIDを取るのがベストではありません
event.y 7. event.x問題
問題：
IEにおいて、イベントオブジェクトは、x、yプロパティ、FFなしを有します
ソリューション：
FFでは、と同等のevent.x event.pageX、event.pageX IEではなくある
のでevent.clientXを交換event.x使用、この変数にもIEた
event.clientXはevent.pageXとの微妙な違いを持っていますスクロールバーがある
とまったく同じように、それができる：
MX = event.x event.x :? event.pageX;
その後、MXの代わりevent.x
フレームについて8。
問題：
フレームは、IEでwindow.testFrameで得ることができる、FFではありません
ソリューション：
window.top.document.getElementById("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'
要素のプロパティを取得9.
FFでは、プロパティが作られたのgetAttributeの独自の定義を（）でなければなりません
FF 10.ノーparentElementで、parement.childrenしかしのparentNode、parentNode.childNodesと
問題：
ChildNodes添字異なるIEとFFで意味を、FFは空白のテキストのchildNodesノードに挿入しました
ソリューション：
あなたはnode.getElementsByTagName（することにより、この問題を回避することができます）
問題：
ノードは、例えば、HTML、IEとFFのparentNode異なる解釈を欠落している場合：
<form>
<table>
<input/>
</table>
</form>
フォームでInput.parentNode値FF、及びIE input.parentNodeノードにnullの
問題。
FFは、彼ががremoveNode方法しなかったノード
ソリューション：
メソッドnode.parentNode.removeChild（ノード）を使用する必要があります
11. constの問題
問題：
constキーワードは、IEで使用することはできません
ソリューション：
VARの代わりに
12.ボディオブジェクト
問題：
FFの体は、bodyタグが完全にブラウザに読み込まれていない前に、体が完全に読み込まれた後、IEが存在しなければならない存在
IEになりますこれを、読み込みが完了していない文書は、のappendChildは、本体に表示されます質問空白のページ
ソリューション：
すべてのノードは、オンロードのすべての後に、操作の体内に挿入します
13. URLエンコード
問題：
通常、FF認識できない＆JS
ソリューション：
あなたはJS直接書き込み＆書き込み＆ドにURLを記述する場合
14. nodeNameのとtagNameを発行します
問題：
FFでは、すべてのノードがnodeNameの値であるが、IE、nodeNameのの使用に伴う問題ではないtextNode tagNameを値
ソリューション：
tagNameをを使用して、それが空の場合には、検出する必要があります
15.要素のプロパティ
IEの下input.typeは読み取り専用ですが、FFに変更することができます
16. document.getElementsByName（）とdocument.allの[名前]問題
質問：
ではIE、getElementsByName（）、document.allの[名前は ] div要素を取得するために使用することはできません
他の要素がある場合は（まだ勉強し、この問題は議論がある）を知らない取ることができません
17.コールサブフレームまたは他のフレーム要素の問題
IEでは、以下の方法は、サブ要素の値を取得するために使用することができます。
document.getElementById（「frameName」）。（文書）がelementName
window.frames [「frameName」]がelementName
FFで変更する必要のある形で、IEとの互換性が実行されます。
window.frames [「frameName」]。contentWindow.document.elementName
window.frames [「frameName」]。document.elementName
18.対象割り当て問題の幅と高さ
問題：
FireFoxの同様のobj.style.heightは= imgObj.heightステートメントが無効です
ソリューション：
ユニファイド使用obj.style.height = imgObj.height + "PX"。
19.のinnerText問題
問題：
IEでのinnerTextは働くことができますが、それは、FirefoxのinnerTextでは動作しません。
ソリューション：
代わりのTextContentのinnerText IE以外のブラウザを使用します
20. event.srcElementとevent.toElement問題
問題：
IEの下で、でもsrcElementオブジェクトには属性がありませんが、ないターゲット属性がありません。Firefoxの下にあってもオブジェクトがターゲットプロパティを持っていますが、何の属性srcElement
ソリューション：
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;
21. Webコンテンツ禁止されているを選択します
問題：
禁止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);
window.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);
}
