DIV + CSSの互換性IE6、IE7、IE8、IE9とFirefox Chromeと他のブラウザ方法

DIV + CSSの互換性IE6、IE7、IE8、IE9とFirefox Chromeと他のブラウザ方法

効果1.DOCTYPE CSSのプロセス
2.FF：divの自動センタリングされたためにマージン左マージンから右を設定し、IEではない
3.FF：体はマージンを設定するためのテキスト整列、DIVの設定：オート（主にマージン左真ん中の前に、マージン右）
4.FF：！パディングを設定した後、DIVは、高さと幅が増加しますが、IEにはない、それは高さと幅でより重要に設定する必要があります
5.FF :!重要なサポート、IEは無視されます！、FFスタイルを設定することが特に重要で使用することができる
垂直整列：問題6.divの垂直中心中央、及びライン間隔が同じ高DIV全体の行の高さを増加させた：200pxの、テキストは、次に、垂直中央に、挿入されています。欠点は、あなたがラップしないコンテンツを制御したいということです
7.cursorを：ポインタカーソルが指のような、手だけIE缶にIE FFで表示することができ
8.FF：リンクが表示を設定し、境界線と背景色を追加：ブロック、および設定フロートを：確実にするために、左折り返されません。高さを提供した場合、ディスプレイの下縁のずれを回避するためにメニューバー、メニューバー、および高度に提供を参照すると、メニューバー内の空間に挿入することができます。
一貫性のない2ピクセル溶液に解釈リードで9 BOXモデルとMozilla FirefoxとIEの違い：DIV {マージン:! 30px重要 ;マージン：28px;} 順序を記述してはならない、両方のマージンが言ってアチャによると、逆転していることに注意してください！この重要な特性は、IEが認識されませんが、他のブラウザを識別することができます。実際、このIEとして解釈される：DIV {maring：30px;マージン ：28px} 最後に従って実施再定義それだけマージンを書き込むことができない:! XXpx重要;
11.ulデフォルトタグは、Mozillaでパディングされ値だけIEの最初のマージン定義UL {マージン：0;パディング：なる値を有する 0;} 問題のほとんどを解決することを

注意事項：

1は、div要素が閉じていなければなりません浮きます。
例えば:(ここfloatA、floatB属性が浮くように設定されています：左;）

<divの上記のid = "floatA"> </ div>
<divの上記のid = "floatB"> </ div>
<divの上記のid = "NOTfloatC"> </ div>の
NOTfloatCここに翻訳を継続したいが、下にはありません列。
このコードはIEで問題なし、FFで問題。その理由は、NOTfloatCラベルをフロート状態にしないで、ラベルが閉じ浮く必要があります。
で

<DIV CLASS = "floatB"> </ div>
<DIV CLASS = "NOTfloatCは"> </ div>
との間に結合され

<=「クリア」のdivクラス> </ div>の
位置声明に注意を払う必要があります。このdiv要素は、最も適切な場所に配置する必要がありますし、2つのdivのフロートプロパティと同じレベルを持っている必要がありますが、入れ子にすることができない関係が間に存在します、またはそれは、例外が発生します。
次のようにしてこのスタイルとして明確に定義されます
.clear {
クリア：両方;
}
また、オーバーフロー内部ラッパーを追加するように自動的に高さを適合させるために：隠された;
ボックスフロートであったときに、高度に自動化されました適応はIEで利用できない、この時間は、ズームとIEのレイアウト私有財産（悪IE）をトリガする必要があります1、互換性を達成するように、行うことができます。
例えば、ラッパーの定義は次のように：

.colwrapper {
オーバーフロー：隠されました。
ズーム：1;
マージン：5pxの自動;}

2、マージン倍増問題
設定マージンフロートIEでdivの設定が倍になります。これはバグがあるIE6です。
溶液は、ディスプレイと内部DIVである：インライン;
例えば：

<DIV ID =」imfloat」> </ div>

CSSに対応

{#IamFloat
フロート：左;
マージン：5pxの; / *場合* IEが理解さ10pxのに/
表示：インライン; / *次にIEが理解される* /} 5pxのために

図3は、関係コンテナが負担に
このような二として、特にパラレルレイアウトコンテナには、多くの時間を、3台のフロートときのdiv、幅、それは問題になりやすいです。IEでは、内側層の外側層の幅が広いのdivラッキングであろう。花火は、Photoshopやピクセルレベルの精度の量を使用しなければなりません。
図4は、問題の高さについては
、それが動的に追加されたコンテンツであれば、それは非常に定義されていないのが最善です。ブラウザが自動的に伸ばすことができますが、コンテンツが静的であれば、最高の高さが良いだろう。（時には自動的にダウン気晴らしはありません、私はどのように特定の問題を知らないようだ）
、最も冷酷な手段、5 -重要;!
詳細のいくつかを解決する方法がない場合は、「重要！」のために、このメソッド.FFを使用することができます自動優先順位の解像度が、IEは無視されます。次の

.tabd1 {
背景：！URL（/res/images/up/tab1.gif）ノー・リピート0PXの0PX重要。/ * FF * /のためのスタイル
の背景：URL（/res/images/up/tab1.gif）無リピート1ピクセルの0PX。/ * IEのスタイル* /}

xxxxをするようにしてくださいことは注目に値する！重要なフレーズは、上記の持っている、互いの上に配置された
CSSのための新たな問題があるのサポートIE7.0。、さらに悪いブラウザ、ウェブの互換性よりも疲れか、我々は、IE7.0の互換性の問題を解決するために、であり、次の資料を得ました：

今、私が主に使用！重要ハックし、テストのためにIE6とFirefoxは通常、しかし、IE7にすることができます！正しく解釈することができます重要、それが表示するのに必要でないページにつながることができます！IE7の道のために良いハックを見つけるためにビットを検索することは問題になりませんIE7で見て、今、「* + HTML」を使用することです。
今、あなたはこのようなCSSを記述することができます。

#example {色：＃333。} / * MOZ * /
* HTML #example {色：＃666。} / * IE6 * /
* + HTML #example {色：＃999。} / * IE7 * /

Firefoxのフォント色が＃333として表示される下次いで、フォントカラーディスプレイの下IE6は、IE7表示フォントの色の下、＃666である＃999です。

 

各ブラウザとの互換性についてCSSはすでに一般的な問題であり、どこでもネットワーク上のチュートリアル。以下の内容が非常に新しい、純粋に個人的な要約ではありません、私は初心者のためのいくつかの助けがあると思っています。
A、CSS HACKは、次の2つほぼすべての今日のHACKのを解決する方法。

1、！重要

重要な方法,!の！重要なサポート上のIE7でのみHACK IE6のために今ある。（言葉遣いに注意してください。事前に位置文を覚えておいてください。）

<スタイル>
#wrapper
{
幅：100pxに重要;！/ * IE7 + FF * /
幅：80px; / * IE6 * /
}
</スタイル>

2、IE6 / IE77対のFireFox

* + * HTMLとHTMLタグはIEに固有である、Firefoxはサポートしていません。* + HTML形式だけでなく、IE7のユニークなラベルのため。

<スタイル>
#wrapper
{
#wrapper {幅：120ピクセル; } / * FireFoxの* /
* HTML #wrapper {幅：80px;} / * IE6固定* /
* + HTML #wrapper {幅：60PX;} / * IE7固定、注意顺序* /
}
</スタイル>

注意：
* IE7 + HTML HTML HACKの最上部に次のステートメントことを確認する必要があります：

<！DOCTYPE HTML PUBLIC ' - // W3C // DTD HTML 4.01移行// EN' 'http://www.w3.org/TR/html4/loose.dtd'>

第二に、フロートユニバーサル閉鎖
クリアフロート原理上はで見つけることができます[構造マークアップなしでフロートをクリアする方法 ]
次のコードは、グローバルCSS追加され、閉じられたのdivクラス=「clearfix」を追加する必要があることができ、テストしました。

<スタイル>
/ *クリア修正* /

.clearfix：後
{
内容： '';
表示ブロック;
高さ：0;
クリア：両方;
可視性：隠されました;
}
.clearfix
{
表示：インラインブロック。
}
/ * IEのMac * /から隠す
.clearfix {表示：ブロック;}
/ * IEのMac * /からエンド隠す
/ * clearfixの終わり* /
</スタイル>

 

第三に、他の互換性のヒント
1、DIV次のFFにパディングを設定した後に増加した幅と高さにつながりますが、IEにはないでしょう。（利用可能！解決することが重要）
2、中央の問題。
1）。縦に。行の高さが現在に設定。DIV同じ高さ、そして垂直整列通過：ミドル（内容はラップしないことに注意してください。）
2）中間レベルのマージン：0自動;（確かに普遍的ではない）。
3、コンテンツへのタグのプラススタイルが必要ですセット表示：ブロック;（ナビゲーションラベルで共通）
。4は、FFとIEの違いのBOXの理解が倍増しそうにdivの中に、すなわちマージンをfloatにそこに2ピクセルの違いにつながる
FFには、次のデフォルトのリストを持っている5、ULタグ。（ナビゲーションタブとコンテンツリストでは一般的）不必要なトラブルを避けるために、予告スタイル最高とパディングを。
6、外ラッパーのdivは、高さを死ぬためにスケジュールされていないとして、最高のプラスオーバーフロー:.隠された高度を達成するために適応
ハンドカーソルカーソル:.ポインタのIE約7は、手だけに適用されます。..

FirefoxのCSSスタイルIE6、IE7のための1
、今それらのほとんどが使用している！重要なのは、通常、することができ、テストのために、IE6とFirefoxをハックする
が、IE7の！重要なのは正しく解釈することができ、表示するのに必要でないページにつながることができます！針の検索
IE7良いハックには問題はないはずIE7で見て、今、「* + HTML」を使用することです。
今、あなたはこのようなCSSを記述することができます。

＃1 {色：＃333。} / * MOZ * /
* HTML＃1 {色：＃666。} / * IE6 * /
* + HTML＃1 {色：＃999。} / * IE7 * /

Firefoxのフォント色が＃333として表示される下次いで、フォントカラーディスプレイの下IE6は、IE7表示フォントの色の下、＃666である＃999です。

中心に2つのCSSレイアウトの問題
次のように主要なスタイルが定義されています。

本体{TEXT-ALIGN：センター;}
#center {MARGIN-RIGHT：オート。MARGIN-LEFT：自動; }

説明：
最初のテキスト-ALIGN親要素定義：中心と、このことは中央親要素内の内容、それがこのように設定されているIEのため。しかし、モジラの中心にありません。「：; MARGIN自動MARGIN-RIGHTのソリューションは、子要素が設定され、プラスの時間を定義することです -left：自動;」 それは注意すべきであるあなたは、ページ全体を作るために、このメソッドを使用したい場合は、中心にセットを推奨していないとということですオート：; MARGIN-LEFTオート：DIVは、あなたがいる限り、定義MARGIN-RIGHTがdiv要素のそれぞれに出て分割して、複数のdivの解体を変えることができ 、 それに。

3ボックスモデル異なる解釈

#box {幅：600PX。// \ IDTHワットie6.0-用：500pxなど。// FF + IE6.0}の
#box {幅：600PX FF幅のための重要な//：！600PX。// / ** / FF +のIE6.0幅について：500pxなど。// ie6.0-ため}

4から生成された倍精度浮動すなわち

#box {フロート：左;幅： 100pxに、マージン：0 0 0 100pxに; // IEは、このような状況200pxの距離で発生
表示：インライン; //}ここで、精巧なブロックについて無視フローティングインライン2同じ行の他の要素が、そして...：インライン要素の特性は、常に新しいライン、高さ、幅、マージンを制御することができる（ブロック要素）行の高さで開始：特徴要素、ブロック要素であります制御不能（埋め込み素子）
#box {表示：//は、同じ行の効果を達成するために配置されている：;インラインブロック//要素包埋ブロック要素としてモデル化することができる表示
diplayを：テーブルと、

IEはこの定義を認識しないMIN-、実際には分をしなければならない通常のケースとして幅と高さです。唯一の幅と高さならば、このような大きな問題、
通常のブラウザは二つの値になることはありませんが、唯一の最小幅と最小高さならば、その後、以下のIEは、幅と高さに等しく設定されていませんでした。
例えば、背景画像を設定するには、幅がより重要です。この問題を解決するために、それはすることができます。

#box {幅：80px; 高さ：35px;} HTML>本体#box {幅：オート。高さ：自動; 最小幅：80px; 最小高さ：35px;}

6ページの最小幅

最小幅は非常に便利なCSSのコマンドです、あなたは私たちは、レイアウトが正しくされていることを確認することができるように要素は、特定の最小幅より小さくすることはできませんを指定することができます。IE、私はこれを認識しない、
と幅を作るためとして、それは実際には最小幅です。また、IEで使用することができ、このコマンドを作成するには、身体の下に置かれdivタグをつけ、その後のdivのクラスを指定することができます。
そして、このCSSデザインを：

#container {最小幅：600PX;幅：式（document.body.clientWidth <600「600PX」：？「自動車」）;}
最初の最小幅は正常であり、ライン2の幅が、Javascriptを使用してそれだけでも、あなたのHTML文書が少ない正式になりIEを、認識しました。これは、実際のJavascriptの最小幅を決定することによって達成されます。

7クリアフロート

.hackbox {ディスプレイ：テーブルと、表示オブジェクト又は//テーブルブロック要素} .hackbox {クリア：両方;}
または追加：コンテンツのセット（擬似オブジェクト）は、オブジェクトの後に発生し、通常のコンテンツに関連して使用した後に、IEは、この疑似オブジェクトをサポートしていない、すなわち、非ブラウザのサポートは、
それはIE / WINのブラウザには影響を与えません。これは最も厄介な......＃ボックスである：後{含量： ;表示：ブロック;高さ： '' 0;クリア：両方;可視性：隠されました;}

8 DIV 3は、フローティングテキストピクセルIEのバグを生じ

フローティングオブジェクトは、左と右、右3pxの距離に左からテキストオブジェクト内に配置され、外側パッチの左マージンを使用します。

#box {フロート：左; 幅：800ピクセル;}＃左{フロート：左; 幅：50％;}＃右{幅：50％;} * HTML #left {マージン右：-3px。//这句是关键}
HTML代码
の<divのid = 'ボックス'>の<divのid = '左'> </ div> <div要素のid = '右'> </ div> </ div>

9つの属性セレクタ（これは互換性のあると考えることができない、バグのCSSに隠されています）

P [ID] {} DIV [ ID] {}
IE6.0とIE6.0バージョンが隠されて、FFとオペラアクションについては、次の
属性セレクタ及びセレクタまたはサブ分化、サブフォームからの範囲選択このようなP [ID]のような、比較的大きな狭い範囲の属性セレクタ、前記p個のタグすべてが同じタイプを持っているIDです。

10のIEかくれんぼ問題

複雑な問題のアプリケーションは、各バー、DIVおよび非表示の他の脆弱今回シークへのリンクがある場合DIVとき。
地域を選択して、マウスが実際にページのコンテンツに発見された場合、コンテンツの一部が表示されません。
ソリューション：#layout #layoutまたは高と広い固定するためのline-height属性を使用します。できるだけシンプルなページ構成。

11非常に適し

外層は、非常に適し高さ調整は、物体の内側の高さが変更されたときに自動的に行うことができない場合に特に内側使用して、オブジェクト
の余白またはpaddign時間。
例：

<DIV ID = 'ボックス'>
<P> Pコンテンツオブジェクト</ P>
</ div>
CSS：#box {背景色：#eee;}
#box P {マージントップ：20ピクセル;マージン底：20ピクセル、テキスト整列：センター ;}

溶液：オブジェクト内のPアップ空プラス2つのDIV CSSコードオブジェクトダウン.1 {高さ：0PX;オーバーフロー：隠された;}またはDIVプラスボーダープロパティ。

/ * IEとFirefoxのCSS * /の互換事典
1.DOCTYPE影響CSS処理

2.FF：div要素のmargin-left、マージン、右を設定すると、すでに自動車を中心に、IEではありません

3.FF：体はマージンを設定するためのテキスト整列、DIVを設定します（マージン、右主のmargin-left、）オート真ん中の前に

4.FF：パディングを設定した後、divの高さが高くなると幅が、IEはそれゆえ1つの以上の重要な幅と高さである必要はありません！

5.FF：重要なサポート、IEは無視され、それは特にFF設定スタイルのために重要であることができます！

垂直整列：垂直中心6.divの問題中間、及びライン間隔が同じ高DIV全体の行の高さを増加させた：200pxの、テキストが次に挿入され、垂直方向の中心に。欠点は、あなたがラップしないコンテンツを制御したいということです

7.cursor：ポインタがFFで、指ポインティング手缶のみIE IEカーソルを表示することができます

8.FF：リンクは、境界線と背景色を追加表示を設定します。ブロックを、そして設定フロートは：何改行しないことを保証するために残しました。高さを提供した場合、ディスプレイの下縁のずれを回避するためにメニューバー、メニューバー、および高度に提供を参照すると、メニューバー内の空間に挿入することができます。

一貫性のない2ピクセル溶液に9 BOXモデルMozillaの解釈リードでFirefoxとIEの違い：
DIV {マージン:!重要30px;マージン：28px;}
両方のマージンが順序を記述してはならないことに注意してくださいと言ってアチャによると、逆に！この重要な特性は、IEが認識されませんが、他のブラウザを識別することができます。実際、このIEとして解釈される：
DIV {Maring：30px;マージン：28px}
最後に従って行わ、これだけマージンを記述しない:! XXpxが重要な定義された言葉を繰り返します。

10.IE5 IE6と説明矛盾のBOX
IE5の下
DIV {幅：300ピクセルによって;マージン：10pxの0 10pxの;}
幅DIVは300ピクセル、10pxの（右パディング）-10px最終の（左充填）DIV幅として解釈されます280pxは、300ピクセル+ 10pxの（右パディング）+ 10pxの（左パディング）= 320ピクセルを計算ブラウザIE6および他の幅であるが。その後、我々は、以下の変更を行うことができます
{：;幅300ピクセルの重要な幅のdiv 0 10pxの0 10pxの：マージン; / ** / :! 340pxを}
** /私はかなり理解していない、それだけでIE5とFirefoxの両方を知っている/この上誰もがそれを理解している場合が、サポートされていないIE6のサポート、私に知らせてください、ありがとう！:)

Mozillaで11.ulのデフォルトのラベルは、パディング値であり、唯一のIEの値を持つ最初のマージン定義ので
UL {マージン：0;パディング： 0;}
問題のほとんどを解決します

注意事項：

1は、div要素が閉じていなければなりません浮きます。

例えば:(ここfloatA、floatB属性が浮くように設定されています：左;）

<#div ID = 'floatA'> </ DIV＃>
<#div ID = 'floatB'> </ DIV＃>
<#div ID = 'NOTfloatC'> </ DIV＃>
ここNOTfloatC翻訳を継続したくありませんしかし、行ダウン願っています。
このコードはIEで問題なし、FFで問題。その理由は、NOTfloatCラベルをフロート状態にしないで、ラベルが閉じ浮く必要があります。
で

<#divクラス= 'floatB'> </ DIV＃>
<#divクラス= 'NOTfloatC'> </ DIV＃>
の間にプラス
<#divクラス= '明確な'> </＃DIV>
これのdiv必見それ以外の場合は、例外が発生します、位置の文は、間に存在する関係を入れ子にすることができない最も適切な場所に配置する必要がありますし、2つのdivのフロートプロパティと同じレベルを持っている必要があることに注意してください。
次のようにしてこのスタイルとして明確に定義されます
.clear {
クリア：両方;}
また、オーバーフロー内部ラッパーを追加するように自動的に高さを適合させるために：隠された;
ボックスフロートであったときに、高度に自動化されました適応はIEで利用できない、この時間は、ズームで（！IEの悪ああ）IEのレイアウト私有財産をトリガーする必要があります：1、互換性を達成するように、行うことができます。
例えば、ラッパーの定義は以下の通り：
.colwrapper {
オーバーフロー：隠された、
ズーム:. 1;
マージン：自動5pxのを;}

2、マージン倍増問題。

IEでdivの設定が倍増する余裕フロートを設定します。これはバグがあるIE6です。
溶液は、ディスプレイと内部DIVである：インライン;
例えば：

<#div ID = 'imfloat'> </＃DIV>

CSSに対応

{#IamFloat
フロート：左;
マージン：5pxの; / *場合* IEが理解さ10pxのに/
表示：インライン; / *次にIEが理解される* /} 5pxのために

コンテナの間に3、クマの関係

血管内、特に並列に多くの場合では、例えば2つ、DIV幅が問題になりやすい。3台のフロート。IEでは、内側層の外側層の幅が広いのdivラッキングであろう。花火は、Photoshopやピクセルレベルの精度の量を使用しなければなりません。

4、高さの問題

あなたが動的にコンテンツを追加している場合、それは非常に定義されていないのが最善です。ブラウザが自動的に伸ばすことができますが、コンテンツが静的であれば、最高の高さが良いだろう。（時には自動的にダウン気晴らしはありません、私はどのように特定の問題を知らないようです）

5、最も冷酷な手段 - !;重要

「！重要」詳細のいくつかを解決する方法がない場合は、あなたが.FFのために、この方法を使用することができ、優先度が自動的に解決されますが、次のようにIEは無視されます。
.Tabd1 {
背景：URL（/res/images/up/tab1.gif） ！; NO-REPEAT重要0PX 0PX FF /ため/ *スタイル*
背景：URL（/res/images/up/tab1.gif）NO-REPEATの1ピクセル0PX; / * IEのスタイル*用/}

DIV +互換性のCSS（II）

2008年4月2日（水曜日）午前10時58分

DIV + CSSの互換性IE6 IE7のFirefox

FirefoxのIEが重要な差別とで最も一般的に用いられる方法であり、そのような:! @import、注釈、属性セレクタ、サブオブジェクトの選択などの異なるブラウザやブラウザの他の方法の異なるバージョンの互換性のために次のような問題があります音声家族のオペレータなどは、これらの方法には、「CSSのサイトのレイアウトレコード」について持っています。

以下は、CSSの互換性IEとFirefoxで

1.DOCTYPE影響のCSS処理

2.FF：div要素のmargin-left、マージン、右を設定すると、すでに自動車を中心に、IEではありません

3.FF：体はマージンを設定するためのテキスト整列、DIVを設定します（マージン、右主のmargin-left、）オート真ん中の前に

4.FF：パディングを設定した後、divの高さが高くなると幅が、IEはそれゆえ1つの以上の重要な幅と高さである必要はありません！

5.FF：重要なサポート、IEは無視され、それは特にFF設定スタイルのために重要であることができます！

ます。https：//www.cnblogs.com/Crakme/archive/2012/09/12/2681835.htmlで再現