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 ブログデザイナー@あめまり