IE および Firefox ブラウザー向けの CSS 互換性に関するヒントをまとめたもの

著者：Eve Cole 更新時間：2025-01-02 18:00:01

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 でも使用できるようにするには、<body> タグの下に <div> を配置し、その div のクラスを指定して、次のように CSS を設計します。

#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 id="ボックス">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7.IEのかくれんぼ問題

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

一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

8. フロート div が閉じられ、適応高さがクリアされます。

①例: <#div id=”floatA” ><#div id=”NOTfloatC” >ここでの NOTfloatC は翻訳を続けたくありません。。 (floatA と floatB のプロパティは float:left; に設定されています)

このコードは IE では正常に動作しますが、問題は FF にあります。その理由は、NOTfloatC が float ラベルではないため、float ラベルを閉じる必要があるためです。 <#div class=”clear”> を <#div class=”floatB”> <#div class=”NOTfloatC”> の間に追加します。この div は位置に注意する必要があり、float 属性が必要です。 2 同じレベルの div 間にネストされた関係は存在できません。そうでない場合は、例外が発生します。そして、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ピクセル; テキスト整列: センター;
<div id="ボックス">
<p>p オブジェクトのコンテンツ</p>
</div>

解決策: CSS コード: .1{height:0px;overflow:hidden;} の上下に 2 つの空の div オブジェクトを追加するか、DIV に border 属性を追加します。

10.IE6 では画像の下に隙間があるのはなぜですか?

このバグを解決するには、HTML のレイアウトを変更したり、img を display:block に設定したり、vertical-align 属性をvertical-align:top に設定したりする方法が多数あります。

ボトムミドルテキストボトムは解決できます。

11. テキスト入力ボックスにテキストを配置する方法

垂直整列:中央を追加します。

12.Web標準で定義されているIDとクラスに違いはありますか?

(1). Web 標準では、ID の繰り返しは許可されていません。たとえば、div id="aa" は 2 回繰り返すことができません。クラスは、理論的には無限に繰り返すことができるため、複数の ID を必要とする定義が可能です。彼は参照を使用できます。

(2).属性の優先課題

ID はクラスよりも優先されます。上記の例を参照してください。

(3). JS などのクライアントスクリプトに便利です。ページ内のオブジェクトに対してスクリプト操作を実行する場合は、その ID を定義できます。それ以外の場合は、ページ要素を走査して指定することによってのみ見つけることができます。これは比較的時間とリソースの無駄ですが、ID よりもはるかに簡単ではありません。

13. LI のコンテンツが長さを超えた場合に省略記号で表示するためのヒント

この手法は IE および OP ブラウザに適用できます。

-->
</スタイル>

14. IE が Web 標準に従ってスクロールバーの色を設定できないのはなぜですか?

解決策は本文をhtmlに置き換えることです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

＜/スタイル＞

15. 高さ約 1px のコンテナを定義できないのはなぜですか?

IE6 でのこの問題はデフォルトの行の高さが原因で発生し、次のような多くの解決手法があります。
オーバーフロー:隠しズーム:0.08 行の高さ:1px

16. Flash 上でレイヤーを表示するにはどうすればよいですか?

解決策は、FLASH の透明度を設定することです。

17. ブラウザーでレイヤーを垂直方向の中央に配置する方法

ここでは、パーセント絶対位置決めと、パッチの外側で負の値を使用するテクニックを使用します。負の値のサイズは、それ自体の幅と高さを 2 で割ったものになります。

Firefox と IE の CSS 互換性に関するヒント

1. div のセンタリングの問題

margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されています。これは IE では機能しません。まず、親要素で text-algin: center を定義する必要があります。親要素内のコンテンツは中央に配置されます。

2. リンク（タグ）の枠線と背景

リンクに境界線と背景色を追加するには、改行がないように、display: block と float: left を設定する必要があります。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示がずれないようにするためです。高さを設定しない場合は、メニューバーにスペースを挿入できます。

3. ハイパーリンクにアクセスしてもホバースタイルが表示されない問題

クリックしてアクセスしたハイパーリンクスタイルにホバーが表示されなくなり、この問題を解決するには、CSS 属性 LVHA の順序を変更します。

コード：

4. カーソル指カーソル

カーソル：ポインタはIE FFでカーソルの指の形を同時に表示できます、手はIEでのみ表示できます

5.ULのパディングとマージン

FF では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみがデフォルトで値を持つため、最初に ul{margin:0;padding:0;} を定義することでほとんどの問題を解決できます。

6.FORMタグ

このラベルは IE では自動的にマージンを持ちますが、FF ではマージンは 0 です。したがって、一貫して表示したい場合は、CSS でマージンとパディングを指定するのが最善です。、スタイル ul, form{margin:0;padding:0;} が最初に定義されているため、後で問題が発生することはありません。

7.BOXモデル説明矛盾問題

FF と IE の BOX モデルの解釈に一貫性がないため、2px の違いが生じます。解決策のヒント: div{margin:30px! important;margin:28px;} 2 つのマージンの順序は、IE では認識できないことに注意してください。重要な属性ですが、ブラウザはそれを認識できません。したがって、IE では実際には次のように解釈されます。

div{maring:30px;margin:28px} を繰り返し定義すると、最後のものが実行されるため、単に margin:xx px! important;#box{ width:600px; と書くことはできません。ie6.0- w idth:500px ; //ff+ie6.0の場合}
#box{ width:600px! important //ff の場合 width:600px; //ff+ie6.0 の場合 width /**/:500px; //ie6.0 の場合;

8. 属性セレクター (これは互換性があるとは考えられません。CSS を非表示にする際のバグです)

p[id]{}div[id]{}

これは IE6.0 および IE6.0 より前のバージョンでは非表示になっており、FF と Opera では機能します。属性セレクターとサブセレクターにはまだ違いがあります。サブセレクターの範囲は形式的に縮小されています。 p[id] などのセレクターは比較的大きいため、id を持つすべての p タグは同じスタイルです。

9.最も冷酷な手段 - !重要

いくつかの詳細な問題を解決する方法が本当にない場合は、このテクニックを使用できます。FF は最初に「! important」を自動的に解析しますが、IE はそれを無視します。

.tabd1{
背景:url(/res/images/up/tab1.gif) no-repeat 0px 0px !重要; /*FF のスタイル*/
背景:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* IE のスタイル */}

xxxx !重要な文は別の文の上に配置する必要があることに注意してください。

10. IEとFFのデフォルト値問題

もしかしたら、なぜ IE と FF で別々の CSS を書かなければならないのか、なぜ IE はこんなに頭の痛い問題なのか、と不満を言いながら、CSS を書いている間、あのいまいましい M$ を呪っているのかもしれません。実際、CSS 標準のサポートに関しては、IE と FF のデフォルト値が異なることが重要です。このスキルを習得すると、CSS を書くことができるようになります。 FF と IE との互換性はそれほど難しくありません。単純な CSS の場合は、「! important」はまったく必要ありません。

ブラウザが Web ページを表示するとき、Web ページの CSS スタイルシートに基づいて表示方法が決定されることは誰もが知っていますが、スタイルシートには必ずしもすべての要素が詳細に記述されているわけではありません。その必要はありません。そのため、説明されていないプロパティについては、ブラウザは組み込みのデフォルトを使用します。テキストなどの表示方法、CSSで色を指定しない場合、ブラウザは黒またはシステムカラーを使用して表示します。 divまたはその他の要素の背景は、CSSで指定しない場合、ブラウザが設定します。白または透明、その他の未定義のスタイルも同様です。したがって、FF と IE でさまざまな表示が異なる根本的な理由は、デフォルトの表示が異なることです。このデフォルトのスタイルがどのように表示されるかについては、w3 に対応する標準が規定されているかどうかはわかりますが、ありません。この点については IE のせいだとコメントする必要があります。

11. FF のテキストでコンテナの高さを拡張できないのはなぜですか?

標準ブラウザで高さが固定されたコンテナは、IE6 のように引き伸ばされません。では、高さを固定して引き伸ばしたい場合は、どのような設定をすればよいでしょうか。解決策は、高さを削除して、min-height:200px を設定することです。min-height を知らない IE6 に対応するために、次のように定義できます。

{
高さ:自動!重要;
高さ:200ピクセル;
最小高さ:200ピクセル;
}

12.FireFoxで連続した長いフィールドを自動で折り返す方法

ご存知のとおり、IE では Word-wrap:break-word を直接使用できます。FF では、この問題を解決するために JS 挿入手法を使用します。

<div id="ff">ああああああああああああああああああああ</div>

13. IE6 でのコンテナの幅が FF と異なるのはなぜですか?

問題の違いは、コンテナ全体の幅に境界線の幅が含まれるかどうかです。ここで、IE6 では 200PX として解釈されますが、FF では 220PX として解釈されます。では、何が問題の原因となるのでしょうか。コンテナーの先頭にある xml を削除すると、最初の問題がここにあることがわかります。先頭のステートメントが IE の qurks モードをトリガーします。

<?xml バージョン="1.0" エンコーディング="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</スタイル>
<div ōnclick="alert(this.offsetWidth)">FireFox を IE と互換性を持たせる</div>

IE7.0 の CSS サポートには新たな問題があり、次のように解決されます。

1つ目のタイプ、CSS HACK

Bpx; /*IE7 および IE6 の場合*/
_height:20px; /*IE6の場合*/

順序に注意してください。

以下も CSS HACK ですが、上記ほど単純ではありません。

#example { color: #333 } /* モズ */
* html #example { color: #666 } /* IE6 */
*+html #example { color: #999; /* IE7 */

2 つ目は、IE 固有の条件付きコメントを使用することです。

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

3つ目の方法はcssフィルター方法です。以下は海外サイトからの翻訳です。

次のように新しい CSS スタイルを作成します。

＃アイテム {
幅: 200ピクセル;
高さ: 200ピクセル;
背景: 赤;
}

新しい div を作成し、前に定義した CSS スタイルを使用します。

<div id="item">ここにテキストが入ります</div>

ここの本体パフォーマンスに lang 属性を追加します。中国語は zh です。

次に、 div 要素の別のスタイルを定義します。

*:lang(ja) #item{
背景:緑!重要;
}

これは、元の CSS スタイルを ! important で上書きするために行われます。 :lang セレクターは IE7.0 ではサポートされていないため、この文には影響しません。したがって、IE6.0 では同じ効果が得られます。残念ながら、Safari ではこの属性もサポートされていないため、次の CSS スタイルを追加する必要があります。

#アイテム:空 {
背景: 緑!重要
}

:empty セレクターは CSS3 仕様です。Safari はこの仕様をサポートしていませんが、この要素が存在するかどうかに関係なく、IE バージョン以外のブラウザーではこの要素が選択されます。

IE6 および FF との互換性については、以前の ! important を検討してください。個人的には、シンプルで互換性が高い最初のバージョンを好みます。