![IE](https://emoji.ameba.jp/img/user/xi/xichang/303032.gif)
![Firefox](https://emoji.ameba.jp/img/user/0-/0-century/1089074.gif)
もちろん一つのコード(タグ)で、どちらも無事に表示できるにこしたことはないのですが、
これはプロのコーダー(CSSやHTMLなどを組み立てる職業の方)でも頭を悩ます問題です。
これらをCSSで解決する策を CSSハック と言います。
本来は無闇やたらに使うことは、お勧めできませんので最小限でのご使用を。
なぜ?お勧めできないか?の理由はごちゃごちゃありますが、
難しいことはあまり気にせず、「あまり使っちゃいけないんだ」程度に考えてください。
とくに
![IE](https://emoji.ameba.jp/img/user/xi/xichang/303032.gif)
これ、ものすごく厄介です
![汗②](https://emoji.ameba.jp/img/user/sm/smilemoon/15346.gif)
別物と考えて良いくらいに表示に違いがでます。
ブラウザが多数ある中で、今回は世の中的に多く使われている
![IE](https://emoji.ameba.jp/img/user/xi/xichang/303032.gif)
![Firefox](https://emoji.ameba.jp/img/user/0-/0-century/1089074.gif)
実は、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 調整する場合】
![チェック](https://emoji.ameba.jp/img/user/am/amecustom/1808701.gif)
下記のような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以外不適応*/
![チェック](https://emoji.ameba.jp/img/user/am/amecustom/1808701.gif)
下記のようにIE7のみ適用のCSSハックが不要です。
.entry {margin:10px;}
* html .entry {margin:20px;} /*IE6のみ適応*/
head~/* */body .entry {margin:40px;} /*IE8のみ適応*/
html:not(:target) .entry {margin:40px;} /*IE8以外不適応*/
![やじるし](https://emoji.ameba.jp/img/user/am/amecustom/1647111.gif)
![別ウィンドウ](https://emoji.ameba.jp/img/user/am/amecustom/1647110.gif)
by ブログデザイナー@あめまり