DIV CSS Web ページ レイアウトの互換性に関する重要なポイントとヒントは何ですか? _html/css_WEB-ITnose

IE vs FF

CSS 互換性ポイント: DOCTYPE は CSS 処理に影響します
FF: margin-left と margin-right を auto に設定すると div はすでに中央に配置されますが、IE は機能しません
FF: body が text-align を設定すると、divマージンを設定する必要があります: 自動 (主にマージン左、マージン右) は中央に配置できます
FF: パディングを設定した後、div は高さと幅を増加させますが、IE は増加させません。そのため、! important を使用して追加のマージンを設定する必要があります高さと幅
FF: サポートされています。重要です。IE は無視します。 !重要 を使用して FF のスタイルを特別に設定できます。 div の垂直方向の中央揃えの問題:vertical-align:middle; DIV全体 line-height:200px; 次にテキストを挿入すると、垂直方向の中央に配置されます。欠点は、行の折り返しを行わずにコンテンツを制御する必要があることです。
カーソル: IE FF ではカーソルの指の形を同時に表示できます。
FF: リンクは境界線と背景色を追加します。行の折り返しがないようにするには、display: block と float: left を設定する必要があります。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示のズレを避けるためです。高さが設定されていない場合は、メニューバーにスペースを挿入できます。XHTML+CSS 互換性ソリューションの小さなコレクションがあります。 XHTML+CSS アーキテクチャを使用することには多くの利点がありますが、未熟な使用によるものであるか、不明確な考え方によるものであるかにかかわらず、実際にいくつかの問題もあります。まず、私が遭遇した問題のいくつかを以下に書き留めます。
1. Mozilla Firefox と IE の BOX モデルの解釈に一貫性がないため、2px の違いが生じます。 解決策:
div{margin:30px! important;margin:28px;}
これら 2 つのマージンの順序は同じであってはいけないことに注意してください。 reversed、!重要です この属性は IE では認識されませんが、他のブラウザでは認識されます。つまり、IE では実際には次のように解釈されます:
div{maring:30px;margin:28px}
定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx! important と書くことはできません
2. IE5 と IE6 のボックスの説明 不一致: IE5 での div{width:300px;margin:0 10px 0 10px;} の幅は 300px-10px (右パディング)-10px (左パディング) として解釈されます。 div のサイズは 280px ですが、IE6 やその他のブラウザでは、デバイス上の幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます:
div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
これについて/**/ IE5 と Firefox がサポートしていることだけがわかりますが、IE6 はサポートしています。違います。誰かがそれを理解している場合は、教えてください、ありがとう！ :) Mozilla ではデフォルトで
3.ul タグにパディング値がありますが、IE ではマージンのみに値があるため、最初に
ul{margin:0;padding:0;} を定義すると、ほとんどの問題を解決できます
4. language 属性は xhtml1.1 ではサポートされていません。コードを