ブラウザ Firefox と IE 間の CSS スタイルシートの違い-CSSチュートリアル-php.cn

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;

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

}

または