ブラウザ Firefox と IE 間の CSS スタイル シートの違い

1 Firefox ie6 IE7 用の CSS スタイル

現在、ほとんどの場合、ハッキングに ! important が使用されています。ie6 と Firefox のテストでは正常に表示されますが、ie7 では ! important が正しく解釈されるため、ページが表示されなくなります。必須！ 「*+Html」を使用するという IE7 用の良いハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。

これで次のような CSS を書くことができます:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color : #999; } /* IE7 */

すると、フォントの色は Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。

2 CSS レイアウトのセンタリングの問題

主なスタイル定義は次のとおりです:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; }

説明:

まず親要素で TEXT-ALIGN: center を定義します。これは、IE ではこの設定で十分であることを意味します。

しかし、mozilla の中心に置くことはできません。解決策は、子要素を定義するときに「MARGIN-RIGHT: auto;MARGIN-LEFT: auto;」を追加することです。この方法を使用してページ全体を中央に配置したい場合は、使用しないことをお勧めします。 DIV では、分割された各 div で MARGIN-RIGHT: auto;MARGIN-LEFT: auto; を定義するだけで、複数の div を順番に分割できます。

3 ボックスモデルのさまざまな解釈が重要です

' 's ' through out ' through ‐ ‐ ‐ ‐ アウト アウト アウト アウト アウト アウト アウト スルー アウト スルー アウト スルー アウト スルー アウトTh through ' through ' through-the-a-w-www ' to ff ff

#box{ float:left; width:100px; // この場合、IE は 200px の表示を生成します。 :inline; //float を無視します}

block について詳しく説明します。 block 要素の特徴は、常に新しい行で始まることと、高さ、幅、行の高さ、およびです。マージンはすべて制御可能 (ブロック要素); Inline 要素の特徴は、他の要素と同じ行にあることです。...制御不可能 (埋め込み要素);

#box{ //シミュレーション可能inline 要素をブロック要素として表示:inline; //同じ行に配置された効果を実現する diplay:table;

5 IE と幅と高さの問題

IE は min- の定義を認識しませんが、実際には通常の幅と高さを、最小値があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }

6 ページの最小幅

min-width は、レイアウトが常に正しいように、要素の最小幅が特定の幅より小さくならないように指定できる非常に便利な CSS コマンドです。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、 タグの下に

を配置し、その div のクラスを指定します。

その後、CSS は次のように設計されます:

#container{

min-width : 600px;

width:e­ JavaScript は IE でのみ認識されますが、HTML ドキュメントも形式的ではなくなります。実際にはJavaScriptの判断により最小幅を実装しています。

7 フローティングをクリアします

.hackbox{

display:table;

// オブジェクトをブロック要素レベルのテーブルとして表示します

}

または

.hackbox{

(疑似オブジェクト)このオブジェクトは通常、コンテンツと組み合わせて使用​​されます。IE はこの疑似オブジェクトをサポートしておらず、Ie ブラウザーでもサポートされていないため、IE/WIN ブラウザーには影響しません。これが一番面倒です

......#box:after{

content: ".";
display: block;
height: 0;
Clear: Both;

Visibility: hidden;

}

8 DIV フローティング IE テキストにより 3 ピクセルのバグが発生します

左側のオブジェクトはフローティングで、右側は外側のパッチの左マージンを使用して配置されます。右側のオブジェクトのテキストは、左から 3 ピクセルの間隔になります。

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//この文がキーです
}
HTML コード

/DIV>

9 属性セレクター (これは互換性がありません。 css を非表示にするバグです)

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

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

これは、IE6.0 およびそれ以下のバージョンの FF および OPera では非表示になります。 function

属性セレクターとサブセレクターの間にはまだ違いがあります。 サブセレクターのスコープは、 p[id] など、ID を持つすべての p タグのように比較的大きくなります。

10 IEのかくれんぼ問題

divアプリケーションが複雑な場合、一部のリンクやDIVなどがこの時点でかくれんぼ問題を起こしやすいです。

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

11 高さの非互換性

高さの非互換性とは、特に内部オブジェクトが
margin または Paddign を使用している場合、内側のオブジェクトの高さが変更されると、外側のレイヤーの高さを自動的に調整できないことを意味します。例:

p オブジェクトのコンテンツ

CSS:

#box {background-color:#eee } :0px;overflow:hidden;} または、DIV に border 属性を追加します。

その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。