いくつかの違いがあり、市場でのブラウザ、多くの異なる種類、異なるブラウザカーネルは同じではありませんので、各ブラウザは、Webページを解析します。ブラウザカーネルは、2、1つのレンダリングエンジンに分割され、他方はJSエンジンは、より多くのコアレンダリングエンジンと言うことに傾斜します。
トライデント、ヤモリ、ブリンク、Webkitの：一般的なブラウザカーネルは4種類に分けることができます
IEブラウザ：またIEカーネルとして知られているトライデントカーネル、 Chromeブラウザ：Webkitのカーネル、今ブリンクカーネル Firefoxブラウザ：Geckoのコア、一般的にカーネルのFirefoxとして知られている Webkitのカーネル：Safariブラウザ Operaブラウザ：もともと自分のプレストカーネル、 Webkitのが点滅カーネルに行ってきましたから、後は、Googleの軍に入隊し、 360ブラウザ：IE +クロームデュアルコア チーターブラウザ：IE +クロームデュアルコア Baiduのブラウザ：IEコア QQブラウザ：トライデント（互換モード）+のWebkit（高速モード）
ブラウザの互換性の問題や互換性はまた、ウェブサイトの互換性の問題として知られており、ブラウザとWebページ間の一貫性のない互換性の問題を生じることがさまざまなブラウザ画面上でページを参照してください。設計と生産のウェブサイト、良いブラウザの互換性では、あなたのサイトが別のブラウザで正しく表示することができます。ブラウザソフトウェアの開発・設計については、より良いブラウザの互換性の基準は、ユーザーに体験をより良くすることができます。
問題は、正式な導入を開始しました：
1.別のブラウザタブデフォルト外側パッチ（マージン）とパッチ内（パディング）が異なります
溶液：ワイルドカード*にCSS増加{マージン：0;パディング：0}
二国間の問題から2.IE6; IE6でセットフロートが、また、マージンを設定し、マージンが問題になります
解決策：設定表示：インライン;
3. IE6で、10pxの下のラベルの高さを設定すると、IE7は、独自に設定の高さを超えるに
ソリューション：隠された、以下、設定の高さよりも行の高さの値を設定：ラベルセットのオーバーフローの高さを超えて
4.デフォルトピクチャー距離
解決策：レイアウトIMGのための使用フロート
5.IE9次のブラウザは、不透明度を使用することはできません
溶液：不透明度：0.5;フィルター：alfha（不透明度= 50）;フィルター：プログラムID：DXlmageTransform.Microsoft.Alfha（スタイル= 0、不透明度= 50）。
前記重ね代、二つの隣接する要素は余裕代が設けられている場合には、マージンが最大になります、最小値は捨て。
7.cursor：手をつない表示タイプは、サファリではサポートされていません
ソリューション：統一された使用カーソル：ポインタ
子要素の設定位置;オート：8二のブロックレベル要素、親要素がオーバーフロー提供される相対;および親要素よりも高さも大きくはないオーバーフローIE6、IE7に隠されます。
ソリューション：相対：親要素が位置するように設定されています
9.const問題
注：Firefoxので、あなたは、一定のconstキーワードを定義するために使用することができ、IEの下で、唯一の定数を定義するにはvarキーワードを使用します。
ソリューション：定数を定義するために使用varキーワードを統一。
10.event.srcElement問題
問題の説明：IE、イベントsrcElementオブジェクトには属性がありませんが、何の目的の属性がありません。Firefoxの下、イベントオブジェクトがターゲットプロパティを持っていますが、何のsrcElementプロパティ。
回避策：srcObj = event.srcElement event.srcElement :? Event.target。
結合11.イベント
IE：dom.attachEvent（）;
他のブラウザ：dom.addEventListener（）;
イベントのIEバブリングに対応する標準ブラウザ使用して、イベント・キャプチャ・モード（最も内側から最も内側の要素または要素IE要素に最も外側によって、すなわち、標準最も外側の要素に）最終基準側はまた、彼らはまた、デフォルトとしてのaddEventListenerとイベントバブリングの第三引数の起源である標準へイベントバブリングを入れてIEは、この分野で合理的であると思います。
12. TR HTMLの動作
以下ではIE9、動作不能innerHTMLプロパティTR
わずかに異なる13.ajax
IE：ActiveXObjectを
その他：xmlHttpReuest
14.ターゲットの幅と高さの割り当て問題
問題の説明：FireFoxの同様のobj.style.height =無効imgObj.height声明。
1.カーソル：手VSカーソル：ポインタ
Firefoxは手をサポートしていますが、つまりサポートポインタはありません
ソリューション：ポインタの統一使用
2.のinnerTextはなく、Firefoxでは、IEで動作することができます。
需用のTextContent。
解决方法：
（navigator.appName.indexOf（ "エクスプローラ"）> -1）{場合
のdocument.getElementById（ '要素'）のinnerText = "私のテキスト";。
} {他
のdocument.getElementById（ '要素'）のTextContent = "私のテキスト"。
}
3. CSS透明
IE：フィルター：プログラムID：DXImageTransform.Microsoft.Alpha（スタイル= 0、不透明度= 60）。
FF：不透明度：0.6。
幅とパディング4. CSS
幅の幅でIE7とIE6を含めパディング、FFのパディングが含まれていません。
5. FFとIEBOXモデルが原因矛盾した2ピクセルに位相差を説明します
{幅box.style：100; border1px;}
IE = 100 box.widthと理解
FFは100 + 1×2 = = box.widthと理解 102 // 境界2ピクセルを含めます
ソリューション：DIV {マージン：30px重要;マージン:! 28px;}
マージンの両方を順次トランス書かれてはならないことに注意してください、IEが重要この属性を認識していないが、他のブラウザを識別することができます！実際、このIEとして解釈される：DIV {maring：30pxと、マージン ：28px}が
最後に従って行わ定義の単語を繰り返し、そうではないだけ書き込みマージン:! XXpx重要。
6. IE5やIE6の解釈が矛盾BOXです
IE5のDIV下{：;マージン300ピクセル幅 ：0 10pxの10pxの0;}
幅DIVは300ピクセル、10pxの（右パディング）-10px（充填左）、280px DIVの最終的な幅、およびIE6の他の閲覧と解釈されますそれが計算幅300ピクセル+ 10pxの（右パディング）+ 10pxの（左パディング）= 320ピクセルに基づいています。その後、我々は以下の修正div要素を作ることができます{幅:! 300ピクセル重要;幅/ ** /：340px;マージン：0 10pxの10pxの0}
7. ULとOLのリストのインデントの問題
マージン;なし：リストスタイル：UL、OL、などのインデントリストを排除すると、スタイル記述する必要があります ：0PXを;パディング：0PX;
マージンを設定し、IEで実績：0PXアップ削除し、インデントのドロップダウンリスト、空白にすることができますそして、数字やドットのリスト、無パディングセットスタイルの影響は、Firefoxで、余白の設定：0PXはパディングを設定し、唯一の空白の上下を削除することができます：0PXは約インデントの後に除去することができますが、あなたはまた、リスト-スタイルを設定する必要がありますになしリスト番号やドットを削除します。言い換えれば、IEだけでマージンを設定：0PX、パディング：0PXとのlist-style：なし3を最終的な結果を達成するために同時にFirefoxの余白に設定されている必要がありながら0PX最終結果は、達成することができます。
8.要素を水平問題を中心とします
FF：マージン：0auto。
IE：親{テキスト整列：センター;}
9.事業部が垂直な問題を中心に
垂直整列：;：行の高さ：中間及びライン間隔を横切って高DIVとして増加200pxの、テキストは、垂直方向の中央に、挿入されています。欠点は、改行を制御するコンテンツではありません。
10.マージンは、問題を倍増しました
IEでdivの設定が倍増する設定マージンフロート。これはバグがあるIE6です。解決策は、ディスプレイ付きのdivの内側にあります。インライン。
例えば：
<divIdは= "imfloat">
のCSSに対応
＃{imfloat
フロート：左;
マージン：5pxの; 10pxのが// IEと理解
ディスプレイ：インラインは、次に// IE 5pxのことと理解しました}
高さと幅を持つ11 IEの問題
IEはこの定義を認識しないMIN-、実際には分をしなければならない通常のケースとして幅と高さです。このような大きな問題は、唯一の幅と高さならば、通常のブラウザは最小幅と最小高さは、その後、IEは以下の幅と高さと等しくなるように設定しなかった場合にのみ、二つの値になることはありません。
例えば、背景画像を設定するには、幅がより重要です。この問題を解決するために、それはすることができます。
#box {幅：80px; 高さ：35px;} HTML>本体#box {幅：自動;高さ：自動。最小幅：80px; 最小高さ：35px;}
12ページの最小幅
問題点として、IEは最小幅を達成するために、分を認識しない、以下の方法が用意されています。
#container {最小幅：600PX;幅：式（document.body.clientWidth <600 "600PX"： "自動"）;}
最初のmin-幅は正常です。しかし、二行目の幅はIEのみ認識し、それはまたあなたのHTML文書が少ない正式になりJavascriptを使用しています。これは、実際のJavascriptの最小幅を決定することによって達成されます。
13 DIVフローティングIE 3つの画素生成されたテキストバグ
左オブジェクトをフローティングと右3pxの右に左距離からテキストオブジェクト内に配置され、外側パッチの左マージンを使用。
#box {フロート：左; 幅：800ピクセル;}
#left {フロート：左; 幅：50％;}
#right {幅：50％;}
* HTML #left {マージン右：-3px。//这句是关键}
<DIV ID = "ボックス">
</ div> <DIV ID = "左">
<DIV ID = "右"> </ div>
</ div>
14. IEの皮や問題を追求
複雑な問題のアプリケーションは、各バー、DIVとかくれんぼの他の脆弱今回へのリンクがある場合DIVとき。
地域を選択して、マウスが実際にページのコンテンツに発見された場合、コンテンツの一部が表示されません。
解決方法：ライン-height属性#layoutの#layoutまたは固定高へと幅広いです。できるだけ簡単なように、ページ構造。
15.フロートdiv要素の閉鎖、クリアフロートを、非常に適応
①例えば：<DIV ID = "floatA"> <DIV ID = "floatB"> <DIV ID = "NOTfloatC">
ここNOTfloatC我々は行ダウン翻訳が、希望を継続する必要はありません。（式floatA、floatB属性がfloat型に設定されています：左;）
このコードはIEで問題なし、FFで問題。理由はNOTfloatCラベルをフロートされていない、ラベルが閉じられたフロートなければなりません。<divclass =「floatB」> <DIV CLASS =「NOTfloatC」>の間にプラスの<divクラス=「クリア」>このdivが位置に注意を払う必要があります、との間に2つのフロートdivの特性を有する同じレベルを持っている必要がありますネスティング関係が存在することができない、または例外が発生します。次のようにしてこのスタイルのような明確に定義される：.clear {クリア：両方;}
ラッパー内のオーバーフローを追加するために、非常に適応させることができるようにするために、外部ラッパーのdiv②ドゥ確実ダイない高さ、のよう：隠された;とき含むボックスフロート、IEで適応性の高い無効、今回はIEをトリガーする必要がありますレイアウトプライベート属性（IEの悪ああ！）ズーム：1は、互換性を達成するように、行うことができます。
例えば、ラッパーの定義は次の通り：
.colwrapper {オーバーフロー：隠されました。ズーム：1; マージン：5pxの自動;}
③組版のために、私たちは、ほとんどがおそらくフロートCSSの記述を使用:.左は時々我々はフロートdiv要素のnのような列の後ろに均一な背景を実行する必要があります。
<DIV ID =」ページ」>
<DIV idは=」左」> </ div>
<DIV ID =」センター」> </ div>
<DIV ID =」右」> </ div>
</ div>
例えば、我々はすべての3つの列を達成するために、背景色が青目的で、ページの背景青を設定したいが、私たちは、ページが実際には同じ高さを保存している間にストレッチダウン左centerrightで、疑問があることがわかりましたページが原因中央にフロートプロパティ、および私たちのページではありませんので、我々が解決しなければならないので、それは、フロートに設定することはできません。
<DIV ID =」ページ」>
<DIV ID =」BG」スタイル=」フロート：左;幅：100％」>
<DIV idは=」左」> </ div>
<DIV ID =」センター」> </ div>
<DIV ID =」右」> </ div>
</ div>
</ div>
そして、再埋め込むフロートは幅DIV 100％のソリューションを残しました。
④ユニバーサルフロートは、（非常に重要！）閉じ
透明フロート原理で、次のコードが追加されたグローバルCSS [構造マークアップなしClearFloatsする方法]、必要性がクローズのdivクラス=「clearfix」を追加するには、テストすることができるで見つけることができます。
/ *クリア修正/
.clearfix：{コンテンツの後：; "" 表示ブロック; 高さ：0; クリア：両方を、可視性：隠されました; }
.clearfix {表示：インラインブロック。}
/ IEのMacから隠す/
.clearfix {表示：ブロック;}
/ IEのMacからエンド隠す/
/ clearfixの終わり* /
.hackbox {ディスプレイ：;テーブル・レベルのブロック要素として//表示オブジェクトテーブル}またはそのように配置され
16.非常に適し
外層は、オブジェクトの内側高さが内部オブジェクトは、時間マージンやパディングを使用して、特にときに、変更されたときに非常に適し高さ調整を自動的に行うことができません。
例：
カラー{バックグラウンド＃ボックス：#eee;}
#box P {マージントップ：20ピクセル;マージン底：20ピクセル、テキスト整列=左：センター;}
<DIV ID = "ボックス">
<P> Pコンテンツオブジェクト</ P>
</ div>
{：;オーバーフロー0PX：隠された;高}またはDIVプラスborderプロパティ：技術の解決各プラス2空のdiv CSSコードは、オブジェクト垂直にPオブジェクト。
絵は、ボイド17 IE6を持っています
ブロックまたは設定垂直-alignプロパティ垂直整列：バグ修正の多くのスキルがあり、これは、ディスプレイへのhtml、IMGまたはセットのレイアウトを変更することができ、トップ/ボトム/ミドル/テキスト-底が解決することができます。
18.テキスト入力ボックス整列テキスト
プラス垂直整列：ミドル。
<スタイルタイプ= "テキスト/ cssの">
入力{
幅：200pxの。
高さ：30px;
国境：1pxの固体赤。
垂直整列：中央;
}
</スタイル>
実績のある、IEの下で任意のバージョンには適用されませんし、FFは、オペラ、サファリ、クロムはOKです！
19. LIは、表示内容の省略記号の長さを超えて
この技術はIE、オペラ、サファリ、CHROMブラウザに適用され、FFはサポートしていません。
<スタイルタイプ= "テキスト/ cssの">
李{
幅：200pxの。
ホワイトスペース：NOWRAP。
テキストオーバーフロー：省略記号。
-o-テキストオーバーフロー：省略記号。
オーバーフロー：隠されました;
}
</スタイル>
20. Web標準IEには、スクロールバーの色を設定することはできませんなぜ
解決策は、本体を交換することで、HTML
<！DOCTYPEhtml PUBLIC " - // W3C // DTD XHTML 1.0厳格// EN"」http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<META HTTP-当量=" Content-Typeの」コンテンツ= "text / htmlの;のcharset = 2312" />
<スタイルタイプ= "テキスト/ cssの">
HTML {
スクロールバー面色：＃f6f6f6。
スクロールバーのハイライト色：#FFF;
スクロールバーの影の色：#eeeeee。
スクロールバー-3dlight色：#eeeeee。
スクロールバーの矢印色：＃000;
スクロールバーのトラック-色：#FFF;
スクロールバー-darkshadow色：#FFF;
}
</スタイル>
21.なぜ容器の高さは約定義することはできませんされ1ピクセル
下のIE6の問題は、デフォルトの行の高さため発生し、解決するために多くの技術があります。
例如：オーバーフロー：隠されたズーム：0.08行の高さ：1ピクセル
22.リンク（ラベル）の境界線と背景
ブロック、およびセットフロート：なし改行することを確実にするために、左の境界線と背景色を追加するためのリンクは、表示を設定します。高さを提供した場合、ディスプレイの下縁の回避転位するためにメニューバー、メニューバー、および高度に提供を参照すると、メニューバー内の空間に挿入することができます。
23.ハイパーリンクが問題に新たなアクセスホバースタイルではありません後
CSSプロパティの順序を変更することで、クリックされたハイパーリンクのスタイルはホバー持ち、アクティブいない訪問し、多くの人々は、スキルを解決するこの問題に遭遇しておく必要があります。LVHA
コード：
<スタイルタイプ= "テキスト/ cssの">
A：リンク{}
：訪問{}
：ホバー{}
：アクティブ{}
</スタイル>
24. FORMタグ
IEでのタグは、いくつかのマージンの自動マージンますが、FFに余裕があなたはそれが、上記の二つの問題のためのCSSマージンとパディングの私のCSSを指定するのがベストですので、同じことを表示したいのであれば、0でありますまず、一般的にそのような実施形態UL、フォームを使用{マージン：0;パディング：0;}。
25.属性セレクタ（これは互換性のあると考えることができない、バグのCSSに隠されています）
P [ID] {} DIV [ID] {}
隠されている以下IE6.0とIE6.0のこのバージョンでは、FFとオペラrole属性セレクタと子供セレクタはまだ違いがあり、子セレクタは減少したフォームからの範囲、scope属性セレクタ比較的大きいですP [ID]として、Pタグは、すべて同じタイプのIDである持っています。
26.なぜコンテナのテキスト-FF伸延高はできません
IE6のコンテナのような標準的なブラウザの固定高さの値は、私はどのようにそれを設定する必要が軟化したい、一定の高さが欲しい、その後、気晴らしのようなものであることを行っていませんか？アプローチは、セットの高さ分の高さを削除することです：200pxの、ここのIE6の最小の高さを認識しないように注意を取るように定義することができます。
{
高さ：オート重要;！
高さ：200pxの。
分の高さ：200pxの。
}
27.それはFLASHレイヤ表示の上に取得する方法
解決策は透明FLASHを設定することです
<paramNameに= "wmodeを" 値= "透明" />