div+css は ie6 ie7 ie8 ie9 および FireFox Chrome と互換性あり method_html/css_WEB-ITnose

1. div の垂直方向の中央揃えの問題

vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします line-height:200px; 次にテキストを挿入すると、垂直方向の中央揃えになります。欠点は、コンテンツが折り返されないように制御する必要があることです。

2. マージンが 2 倍になる問題

IE でフローティングに設定された div に設定されたマージンは 2 倍になります。これはie6に存在するバグです。解決策は、この div に display:inline; を追加することです。 例:

対応する CSS は

#imfloat{
margin:left; / *IE では 10px として認識されます*/
display:inline;/*IE では 5px として認識されます*/}

3. float ie によって生成される倍の距離

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

ここで、block と inline の 2 つの要素について詳しく説明します。ブロック要素の特徴は、常に新しい行で開始し、高さ、幅、行の高さ、余白をすべて制御できることです (ブロック要素)。Inline 要素の特徴は、他の要素と同じ行にあることです。要素を制御できません (インライン要素);

#box{ display :block; // インライン要素をブロック要素としてシミュレートできます。 // 同じ行に配置する効果を実現します

4 IE と幅と高さの問題

IE は min- の定義を認識しませんが、実際には通常の幅と高さをあたかも min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さは変化しません。 IEではすべて設定されています。
たとえば、背景画像を設定したい場合は、この幅がより重要です。この問題を解決するには、次のようにします。

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }

5. ページの最小幅

Min-width は、レイアウトが常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。 。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、

タグの下に

を配置し、その div のクラスを指定して、次のように CSS を設計します:

#container{ min-width: 600px ; width :expression(document.body.clientWidth

最初の min-width は通常ですが、2 行目の幅は IE でのみ認識されます。また、HTML ドキュメントの堅苦しさも軽減されます。実際にはJavaScriptの判断により最小幅を実装しています。

6. DIV フローティング IE テキストは 3 ピクセルのバグを生成します

左側のオブジェクトはフローティングで、右側は外側のパッチの左マージンを使用して配置され、右側のオブジェクトのテキストは左側から 3 ピクセル離れた位置になります。 .

#box{ float: left; width:800px;}

#left{ float:left; width:50%;}

*html #left{ margin-right:- 3px; //この文がキーです }

/div>

7.IE かくれんぼの問題

div アプリケーションが複雑で、各列にいくつかのリンクがある場合、この時点で DIV のかくれんぼ問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。

解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

8. Float div クロージャー; 適応高さ;

ここの NOTfloatC は翻訳を続行せず、下に移動したいと考えています。 (floatAとfloatBの属性はfloat:leftに設定されています;) このコードはIEでは問題ありませんが、問題はFFにあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。
② div の高さを外部ラッパーとして設定しないでください。高さが自動的に適応されるようにするには、ラッパーに overflow: hidden を追加します。 ; フロートを含むボックスが使用される場合、IE では高さの自動調整が無効になります (邪悪な IE!) 互換性を実現するには、zoom:1; を使用します。 たとえば、ラッパーは次のように定義されます:

.colwrapper{ overflow:hidden;zoom:1; margin:5px auto;}

③植字の場合、最も一般的に使用される CSS 記述は、Create が必要になる場合があります。列 n の float div の背後にある統一された背景:

たとえば、3 つの列すべての背景色を青に設定します。 . しかし、左中央右が下に伸びても、ページは実際には同じ高さを維持することがわかります。ページがフロート属性ではなく、ページを中央に配置する必要があるため、ページをフロートに設定できないためです。これが解決策です

＜div id=”page”>

＜div id=”bg” style=”float:left;width:100%”>

”幅は 100% DIV ソリューションです

④Universal float クロージャ (非常に重要!)
float をクリアする原理については、[構造マークアップを使用せずに Float をクリアする方法] を参照して、次のコードをグローバル CSS に追加し、 class= を閉じる必要のある div に追加するだけで十分です。

/* Clear Fix */
.clearfix:after { content:"."; :both; Visibility:hidden; }
.clearfix { display :inline-block; }
/* IE Mac から非表示にする */

.clearfix {display:block;}

/* IE Mac から非表示にするを終了する */
/* end of clearfix */

または、次のように設定します:

.hackbox{ display:table; // オブジェクトをブロック要素レベルのテーブルとして表示}

９．高さの非互換性

高さの非互換性とは、特に内側のオブジェクトがマージンまたはパディングを使用している場合、内側のオブジェクトの高さが変更されると、外側のレイヤーの高さを自動的に調整できないことを意味します。

例:

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; }

＜p>p オブジェクトのコンテンツ＜/p> ＜/div>

解決策: P オブジェクトの上下に 2 つの空の div オブジェクトを追加します。 CSS コード: .1{height:0px;overflow:hidden;} DIV に border 属性を追加します。
1. div の垂直方向の中央揃えの問題
vertical-align:middle; 行間を DIV 全体と同じ高さまで増やす line-height:200px; その後、テキストを挿入すると垂直方向の中央揃えになります。欠点は、コンテンツが折り返されないように制御する必要があることです。

2. マージンが 2 倍になる問題

IE でフローティングに設定された div に設定されたマージンは 2 倍になります。これはie6に存在するバグです。解決策は、この div に display:inline; を追加することです。 例:



対応する CSS は


#imfloat{

margin:left; / *IE では 10px として認識されます*/

display:inline;/*IE では 5px として認識されます*/}

3. float ie によって生成される倍の距離
#box{ float:left width; :100px; margin: 0 0 0 100px; //この場合、IE は 200px の距離を生成します。 display:inline; //float を無視します}

ここで、block と inline の 2 つの要素について詳しく説明します。ブロック要素の特徴は、常に新しい行で開始し、高さ、幅、行の高さ、余白をすべて制御できることです (ブロック要素)。Inline 要素の特徴は、他の要素と同じ行にあることです。要素は制御できません (インライン要素)。

#box{ display:block; //インライン要素をブロック要素としてシミュレートできます。 display:inline; //同じ行に配置する効果を実現します

4 IE と幅と高さの問題

IEは min-この定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。
たとえば、背景画像を設定したい場合は、この幅がより重要です。この問題を解決するには、次のようにします。

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }

5. ページの最小幅

Min-width は、レイアウトが常に正しいことを保証するために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。 。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、

タグの下に

を配置し、その div のクラスを指定して、次のように CSS を設計します:

#container{ min-width: 600px ; width :expression(document.body.clientWidth

最初の min-width は通常ですが、2 行目の幅は IE でのみ認識されます。また、HTML ドキュメントの堅苦しさも軽減されます。実際にはJavaScriptの判断により最小幅を実装しています。

6. DIV フローティング IE テキストは 3 ピクセルのバグを生成します

左側のオブジェクトはフローティングで、右側は外側のパッチの左マージンを使用して配置され、右側のオブジェクトのテキストは左側から 3 ピクセル離れた位置になります。 .

#box{ float: left; width:800px;}
#left{ float:left; width:50%;}
*html #left{ margin-right:- 3px; //この文がキーです }

/div>

7.IE かくれんぼの問題
div アプリケーションが複雑で、各列にいくつかのリンクがある場合、DIV でかくれんぼの問題が発生しやすくなります。

一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。

解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

8. Float div クロージャー; フロートのクリア; 適応高さ;

ここの NOTfloatC はパンを続けたくありませんが、下に移動したいと考えています。 (floatAとfloatBの属性はfloat:leftに設定されています;) このコードはIEでは問題ありませんが、問題はFFにあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。

② div の高さを外部ラッパーとして設定しないでください。高さが自動的に適応されるようにするには、ラッパーに overflow: hidden を追加します。 ; フロートを含むボックスが使用される場合、IE では高さの自動調整が無効になります (邪悪な IE!) 互換性を実現するには、zoom:1; を使用します。 たとえば、ラッパーは次のように定義されます:

.colwrapper{ overflow:hidden;zoom:1; margin:5px auto;}

③植字の場合、最も一般的に使用される CSS 記述は、Create が必要になる場合があります。列 n の float div の背後にある統一された背景:

＜div id="right">＜/div>

＜/div>

たとえば、3 つのページの背景色を青色に設定したいとします。列は青色です。これは色の目的ですが、左中右が下に伸びるにつれて、ページは実際には同じ高さを維持していることがわかります。この問題は、ページがフロート属性ではなく、ページをフロートに設定できないために発生します。中央に置く必要があるので、次のように解決する必要があります

=”center”>

次に、幅は DIV の 100% になります。解決策

④ユニバーサルフロートクロージャ（非常に重要！）

クリアフロートの原理については、「構造マークアップを使用せずにフロートをクリアする方法」を参照してください。次のコードをグローバルCSSに追加し、class="clearfix"を追加します。閉じる必要がある div はこれで完了です。

/* Clear Fix */

.clearfix:after { content:"."; }

.clearfix { display:inline-block; }
/* IE Mac から非表示にする */
.clearfix {display:block;}
/* IE Mac から非表示にするのを終了 */
/* clearfix の終了 */

または、次のように設定します:

.hackbox{ display:table; // オブジェクトをブロック要素レベルのテーブルとして表示}

９.高さの非互換性

高さの非互換性とは、特に内側のオブジェクトがマージンまたはパディングを使用している場合、内側のオブジェクトの高さが変更されると、外側のレイヤーの高さを自動的に調整できないことを意味します。
例:

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; }

＜p>p オブジェクトの内容＜/p>
＜/div>

解決策: P オブジェクトの上下に 2 つの空の div オブジェクトを追加します: .1{height:0px;overflow:hidden;} またはDIV にボーダー属性を追加します。