div+css ブラウザの互換性と CSS の理解 hack_html/css_WEB-ITnose

長い間 div+css コードを書いてきたので、このハックが何なのか本当にわかりません。 ネットで注意深く調べました。簡単に言えば、ブラウザーごとに異なる CSS コードを記述するプロセスは CSS ハックと呼ばれ、CSS ハックの作成とも呼ばれます。

CSS ハックの原則: ブラウザーの CSS サポートと解析結果の違いにより、CSS の優先順位関係も原因となります。これを使用して、ブラウザごとに異なる CSS を記述することができます。

例えば、IE6はアンダーライン「_」とアスタリスク「*」を認識でき、IE7はアスタリスク「*」は認識できるがアンダーライン「_」は認識できず、Firefoxは両方とも認識できない。待ってください

書く順番は、認識能力の高いブラウザのCSSを最後に書くのが一般的です

ブラウザの優先順位: FF 見てみましょう以下の div+css ブラウザ互換性の例:

#demo {width:100px;} /* FIREFOX、IE6、IE7 で実行されます。*/

* html #demo {width:120px;} /* 実行されます前の定義は後の定義によって上書きされるため、IE6 では #demo の幅は 120px; */

*+html #demo {width:130px;} /* IE7 で実行されます* /

結局、#demo 3 つのブラウザの幅は次のように解釈されます:

firefox:100px;

ie7:130px;

上記の例は、前の例でも使用できます。記事「div+css ブラウザ互換性 それを解決するには! ここでは例は示しません。

div+css ブラウザ互換性のヒント:

① 垂直方向の中央揃え。 line-height を現在の div と同じ高さに設定し、 .vertical-align: middle を使用します。(コンテンツを折り返さないように注意してください。)

② 水平方向に中央揃えにする: 0 auto; (もちろん万能ではありません)

③ a タグ内のコンテンツにスタイルを追加する必要がある場合、display: block; を設定する必要があります（ナビゲーションタグで共通）

④ FFとIEのBOXの理解の違いにより2pxの差が生じ、IEではfloatに設定したdivのマージンが2倍になるなどの問題が発生します。

⑤ ulタグはデフォルトでリストスタイルとパディングを持っています。不必要なトラブルを避けるために、事前に宣言するのが最善です。 (ナビゲーションタグやコンテンツリストでよくあることです)

⑥ divの高さを設定しないでください。高さの適応性を実現するには、overflow: hidden を追加するのが最善です。

⑦ ハンドカーソルについては、FF の下の div にパディングを設定すると幅が生じます。 (! important で解決できます)

注: Firefox IE6 IE7 の CSS スタイル

最近では、ハッキングに ! important を使用するものがほとんどで、IE6 と Firefox のテストは正常に表示されます。

ただし、IE7 の !重要 は正しく解釈されるため、ページが必要に応じて表示されなくなります。ピンを見つけました

IE7 の良いハックは、「*+html」を使用することです。IE7 でブラウズすれば問題ありません。


互換性のあるブラウザを作成します:
#cshk{ height:20px; } /* Moz */
* html #cshk {height:50px; } /* IE6 */

*+html #cshk {height:80px ; } /* IE7 */

そうすると、Firefox での高さは 20、IE6 での高さは 50、IE7 での高さは 80 になります。

いくつかアドバイスさせてください: CSS Hack を使用したほうがよいでしょうか? 使用しないほうがよいでしょうか?実際、Web サイトを設計する際には、CSS のバグが発生する可能性がある場所をいくつか考慮することが最善です。ほとんどの専門家はハッキングを使用しません。