IE と Mozilla_CSS/HTML の間のレイアウトの違いを解決するには、! important を使用します。

「Web デザイナー」ページをデザインするときに、IE やその他のブラウザ (Mozilla、Opera など) のメイン メニューの表示効果に 2px のずれがあるという問題があります。スクリーンショットは次のとおりです:

IE での効果

Mozilla Firefox の効果

これは、IE のボックス間の距離の解釈のバグが原因で発生します (onestab の「 浮動モデルの問題 」を参照)。私は「 Table vs. CSS--A Battle of life and death 」を翻訳するまで、この問題を解決することができませんでした。著者からのヒントが解決策を見つけるのに役立ちました。それは、! important を使用することでした。

! important は CSS1 で定義された構文で、指定されたスタイル ルールの適用優先​​度を高めるために使用されます (W3.org の説明 を参照)。文法形式 { sRule! important }。これは定義の最後に記述されます。例:

box{color:red ! important;}

最も重要な点は、IE はこの構文をサポートしたことがありませんが、他のブラウザはサポートしているということです。したがって、これを使用して IE やその他のブラウザーにさまざまなスタイルを定義できます。たとえば、次のようなスタイルを定義します。

Mozilla で閲覧すると、!重要度の優先度がわかるため、色 #60A179 が表示されます:

.colortest { 
border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;
} 

IE で閲覧すると、!重要度の優先度が理解されないため、色 #00F が表示されます:

ご覧のとおり、! important を使用すると、IE 以外のブラウザのスタイルの後に ! important を追加するだけで、IE ブラウザと非 IE ブラウザに異なるスタイルを設定できます。したがって、上記の私のホームページの 2px の表示の違いは簡単に解決できます。

パディングトップ: 11px !重要 パディングトップ: 9px;

! important は間違いなく CSS レイアウトの強力なツールになります。ぜひ覚えてマスターしてください:)