1.「IE6とFFで重要な使い方」
.box1 {幅:150px !重要;}
.box1 {幅:250px;}
! important は、この設定が優先されることを意味します。幅が後で設定された場合、IE は、後で設定された幅を基準として使用します。現在の値 (以前の !重要な値) が使用されます。例: #test {width: 300px ! important}IE と FF はどちらも 300PX を表示します。最後に値がある場合、IEでは次の値が表示され、FFでは先頭に!import!を付けて表示されます。
他のブラウザでは、優先順位の関係により、以前に設定された幅が常に優先されます。
#test {幅:300px;幅:400px !重要 ;}
この文で表示される結果は、IEとFFの幅が両方とも400PXであるということです
#test {幅:300px !重要 ;幅:400px;}
この文章の表示結果は FF:300px IE:400px
したがって、!重要を使用する場合は、!重要を含む単語を前に置きます。
しかし、問題は再び発生します。IE7 はすでに認識できています。重要。以下を参照してください。
2. Firefox ie6 ie7 の CSS スタイル
最近では、ハッキングのために ! important を使用することがほとんどです。ie6 と Firefox のテストでは正常に表示されますが、ie7 では ! important が正しく解釈されてしまい、必要なページが表示されなくなります。 「*+html」を使用した IE7 用の優れたハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。
次のような CSS を書きます。
#1 { カラー: #333 } /* モズ */
* html #1 { カラー: #666 } /* IE6 */
*+html #1 { カラー: #999 } /* IE7 */
すると、フォントの色は、Firefox では #333、IE6 では #666、IE7 では #999 として表示されます。「+」を使用して、IE でのみ認識される CSS ハックを実装できます。「_」ハックを使用することを考えている人もいるかもしれません。 , ですが、IE7では「_」が認識されないため区別されています。したがって、 + を使用します
テスト結果:
IE5.5、IE6、IE7 ブラウザはそれを認識できます。
FF2.0、Opera 9、Safari 2 ブラウザでは認識されません。
3. IE7ハック
IE7 では多くのバグが修正され、一部のセレクターのサポートが追加されたため、*html {}、html>body {}、! important などの IE を非表示または表示するためのハックは IE7 では機能しなくなります。 CSS Hack は推奨されておらず、条件付きコメントは確実なフィルターですが、条件付きコメントは HTML 内でのみ表示できるため、CSS Hack は依然としてその役割を果たしています。 Nanobot は、IE7 向けのいくつかの CSS ハック、具体的には次のことを発見しました。
>体
html*
*+html
これら 3 つの記述方法のうち、最初の 2 つは CSS の不正な記述方法であり、標準準拠のブラウザでは無視されますが、IE7 ではそうは考えられません。 >bodyの場合は欠落しているセレクタをグローバルセレクタ*に置き換える、つまり*>bodyに処理することになりますが、この現象は>セレクタだけでなく+セレクタや~セレクタにも存在します。 html* の場合、html と * の間にスペースがないため、これも CSS 構文エラーですが、IE7 はこれを無視せず、ここにスペースがあると誤って認識します。 3 番目の *+html の場合、IE7 は html の前の DTD 宣言も要素であると認識するため、これら 3 つのメソッドのうち、このメソッドだけが正当な CSS 記述であり、バリデーターを通過できることを意味します。したがって、検証は著者が推奨するハックの使用法でもあります。
Internet Explorer 6 以下
* html {} を使用して html 要素を選択します。
IE 7 以下
*+html、* html {} を使用して html 要素を選択します。
IE7のみ
*+html {} を使用して html 要素を選択します。
IE 7 および最新のブラウザのみ
html>body {} を使用して body 要素を選択します。
最新のブラウザのみ (IE 7 は除く)
html>/**/body {} を使用して body 要素を選択します。
4. IE と FF ではボックス モデルの解釈が異なります。 コードの説明: #test { width: 650px ! important;width: 648px;padding-left:2px;background:#fff; }
テストで表示される帯域幅は 650px です
IE Box の合計幅は、width+padding+border+margin の幅の合計です。FF Box の合計幅は width の幅となり、padding+border+margin の幅も width に含まれます。
BOX{WIDTH:"300"; PADDING:"5PX";} がある場合、IE の BOX の幅は 310 である必要があります。 FF の幅は 300 なので、BOX がいっぱいになるときは、BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";} を使用して、BOX の幅が常に 300 ピクセルになるようにする必要があります。伸びる現象も発生せず、FFではフローティング層が埋まりきらないという事態も発生しません。
5. Mozilla では ul タグにパディング値がありますが、IE ではマージンのみが値を持ちます。
ul{マージン:0;パディング:0} を設定します
6. IE は相続関係と父子関係の違いを区別できません。これらはすべて相続関係です。
7. FF で div にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要なコマンドで解決できます)。
8. センタリングの問題
1. 垂直方向の中央揃え。 line-height を現在の div と同じ高さに設定し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください)。
2. 水平方向の中央マージン: 0 自動 (もちろん普遍的ではありません)。
3. a タグのコンテンツにスタイルを追加する必要がある場合は、display: block を設定する必要があります (ナビゲーション タグで一般的)。
4. FF と IE の間の BOX の理解の違いにより、2px の差が生じ、IE では浮動小数点に設定された div のマージンが 2 倍になるなどの問題が発生します。\
5.ULのさまざまな性能:
ul タグにはデフォルトでリストスタイルとパディングがあり、不要なトラブルを避けるために事前に宣言することをお勧めします。
6. div の高さを外部ラッパーとして設定しないでください。高さを調整するには、overflow: hidden を追加することをお勧めします。
9. ハンドカーソルについては、IE のみに適用されます。IE と FF の両方で認識される場合は、cursor: pointer を使用してください。