IE（InternetExplorer）と
Firefox とのブラウザ毎の表示違い。もちろん一つのコード（タグ）で、どちらも無事に表示できるにこしたことはないのですが、
これはプロのコーダー（CSSやHTMLなどを組み立てる職業の方）でも頭を悩ます問題です。
これらをCSSで解決する策を CSSハック と言います。
本来は無闇やたらに使うことは、お勧めできませんので最小限でのご使用を。
なぜ？お勧めできないか？の理由はごちゃごちゃありますが、
難しいことはあまり気にせず、「あまり使っちゃいけないんだ」程度に考えてください。
とくに
IE はバージョンによって見え方が違う場合があります。これ、ものすごく厄介です
別物と考えて良いくらいに表示に違いがでます。
ブラウザが多数ある中で、今回は世の中的に多く使われている
IEバージョン6、7、8 とFirefox に絞って書きますね。実は、CSSハックといっても、いろんな改善策があります。
なので、今回は私が実際にやっている方法でご説明します。
| Firefox を基準と考えます | .entry {margin:10px;} |
|---|---|
| IE 6 のみ適応 | * html .entry {margin:10px;} |
| IE 7 のみ適応 | *:first-child+html .entry {margin:10px;} |
| IE 8 のみ適応 | head~/* */body .entry {margin:10px;} html:not(:target) .entry {margin:10px;} |
【例えば class="entry" の margin 調整する場合】
Firefoxが10px、IE6が20px、IE7が30px、IE8が40px、でやっと見た目が揃う場合下記のようなCSSを書く必要があります。
.entry {margin:10px;}
* html .entry {margin:20px;} /*IE6のみ適応*/
*:first-child+html .entry {margin:30px;} /*IE7のみ適応*/
head~/* */body .entry {margin:40px;} /*IE8のみ適応*/
html:not(:target) .entry {margin:40px;} /*IE8以外不適応*/
Firefox、IE7が10px、IE6が20px、IE8が40px、のようにFirefoxとIE7が同じ場合下記のようにIE7のみ適用のCSSハックが不要です。
.entry {margin:10px;}
* html .entry {margin:20px;} /*IE6のみ適応*/
head~/* */body .entry {margin:40px;} /*IE8のみ適応*/
html:not(:target) .entry {margin:40px;} /*IE8以外不適応*/
更に詳しく知りたい方はこちらを参照ください。
by ブログデザイナー＠あめまり