CSS の互換性 (IE および Firefox) のヒント

CSS とブラウザーの互換性は時々頭を悩ませることがあるかもしれませんが、テクニックと原理を理解すれば、それは難しくないでしょう。IE7、6、および Fireofx の互換性に関するヒントをインターネットから集めて整理しました。 Web2.0 への移行には、xhtml 形式でコードを記述するようにしてください。DOCTYPE は CSS 処理に影響します。W3C 標準として、DOCTYPE ステートメントを追加する必要があります。

CSS のヒント

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 でも使用できるようにするには、 タグの下に