CSS の互換性に関する一般的なヒント
xhtml 形式でコードを記述してみてください。DOCTYPE は CSS 処理に影響します。W3C 標準として、DOCTYPE ステートメントを追加する必要があります。
1.divの垂直センタリングの問題
vertical-align:middle; 行間隔を DIV 全体と同じ高さまで増やします。 line-height:200px; 次に、テキストを挿入すると、垂直方向の中央に配置されます。欠点は、コンテンツを制御する必要があり、別の行で折り返さない必要があることです。
2. 証拠金倍増問題
float に設定された div に設定されたマージンは、IE では 2 倍になります。これはie6に存在するバグです。解決策は、この div 内に display:inline; を追加することです。
例えば：
<#div id=”imfloat”>
対応する CSS は #imfloat{
フロート:左;
margin:5px;/*IEでは10pxとして認識されます*/
display:inline;/*IEでは5pxと認識されます*/}
3. 浮動IEにより生成される2倍の距離
#box{ float:left; width:100px; margin:0 0 0 100px; // この場合、IE は 200px の距離を生成します。 // float を無視します。
block 要素と inline という 2 つの要素について詳しく説明します。 block 要素の特徴は、常に新しい行で始まり、高さ、幅、行の高さ、およびマージンをすべて制御できることです (ブロック要素)。インライン要素の要素はそれであり、それ以外の要素は同一行上にあり制御できません（インライン要素）。
#box{ display:block; //インライン要素をブロック要素としてシミュレートできます。 //同じ行に配置する効果を実現します。
4 IE の幅と高さに関する問題
IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。
たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします。
#box{ 幅: 80px; 高さ: 35px;}html>body #box{ 幅: 自動; 高さ: 35px;}
5. ページの最小幅
min-width は非常に便利な CSS コマンドで、要素の最小幅が特定の幅より小さくならないように指定できるため、レイアウトが常に正しくなります。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE でも使用できるようにするには、
タグの下に#container{ min-width: 600px; width:exPRession(document.body.clientWidth < 600? "600px": "auto" );}
最初の min-width は通常ですが、2 行目の幅は JavaScript を使用しており、これは IE でのみ認識されるため、HTML ドキュメントは形式的ではなくなります。実際にはJavaScriptの判断により最小幅を実装しています。
6. DIV フローティング IE テキストにより 3 ピクセルのバグが発生する
左側のオブジェクトはフロートされ、右側のオブジェクトは外側のパッチの左マージンを使用して配置されます。右側のオブジェクト内のテキストは、左側から 3 ピクセルの間隔で配置されます。
#ボックス{フロート:左;幅:800ピクセル;}
#left{ フロート:左幅:50%;}
#right{ 幅:50%;}
*html #left{ margin-right:-3px; //この文が重要です}
div アプリケーションが複雑な場合、各列にいくつかのリンクがあり、DIV 内でかくれんぼの問題が発生しやすくなります。
一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。 解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。
8. フロート div が閉じられ、適応高さがクリアされます。
①例: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >ここでの NOTfloatC は平行移動を続けたくなく、下方向に配置したいと考えています。 (floatA と floatB のプロパティは float:left; に設定されています)
このコードは IE では正常に動作しますが、問題は FF にあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。 <#div class="floatB"> <#div class="NOTfloatC"> の間に <#div class="clear"> を追加します。この div は位置に注意する必要があり、次の 2 つの div と同じである必要があります。 float 属性では、レベル間にネストされた関係は存在できません。そうでない場合は、例外が発生します。そして、clear スタイルを次のように定義します: .clear{ clear:both;}
② div の高さを外部ラッパーとして設定しないでください。高さが自動的に調整されるようにするには、ラッパーに float ボックスが含まれる場合、自動高さ調整が無効になります。レイアウトのプライベート属性 (邪悪な IE!) は、zoom:1; を使用して実行できるため、互換性が実現されます。
たとえば、ラッパーは次のように定義されます。
.colwrapper{ オーバーフロー:非表示; マージン:5px 自動;}
③植字の場合、最もよく使用する CSS 記述はおそらく float:left です。列 n の float div の後ろに統一された背景を作成する必要がある場合があります。
たとえば、ページの背景を青に設定して、3 つの列すべての背景色を青にしたいとします。ただし、左中央右が下に伸びるにつれて、ページは実際には同じ高さを維持することがわかります。その理由は、ページが float 属性ではなく、ページを中央に配置する必要があるため、float に設定できないためです。そのため、次のように解決する必要があります。
解決策は、幅 100% の float left DIV を埋め込むことです。
④ユニバーサルフロートの開閉（超重要！）
float をクリアする原理については、「構造マークアップを使用せずに Float をクリアする方法」を参照してください。グローバル CSS に次のコードを追加し、毎回閉じる必要がある div に class="clearfix" を追加します。
/* 修正をクリア */
.clearfix:after { コンテンツ: "."; クリア: 両方;
.clearfix {表示:インラインブロック}
/* IE Mac から非表示にする */
.clearfix {ディスプレイ:ブロック;}
/* IE Mac からの非表示を終了 */
/* クリアフィックスの終わり */
または、次のように設定します。 .hackbox{ display:table; // オブジェクトをブロック要素レベルのテーブルとして表示します。
9.高さは調整できません
高さが非適応であるということは、特に内側のオブジェクトがマージンまたはパディングを使用している場合、内側のオブジェクトの高さが変化したときに、外側の高さが自動的に調整できないことを意味します。
例：
#box {背景色:#eee }
#box p {マージントップ: 20ピクセル; テキスト整列: センター;
p オブジェクトのコンテンツ
解決策: CSS コード: .1{height:0px;overflow:hidden;} の上下に 2 つの空の div オブジェクトを追加するか、DIV に border 属性を追加します。
10.IE6 では画像の下に隙間があるのはなぜですか?
このバグを解決するには、HTML のレイアウトを変更したり、img を display:block に設定したり、vertical-align 属性をvertical-align:top に設定したりする方法が多数あります。
ボトムミドルテキストボトムはすべて解決できます。
11. テキスト入力ボックスにテキストを配置する方法
垂直整列:中央を追加します。