忘れないための各ブラウザごとのCSSハックのまとめ-IE・Safari・Chome・Firefoxなど-

by ateliee · 公開済み 2013年4月19日 · 更新済み 2013年4月19日

今回は自分用のメモ代わりにブラウザごとのCSSハックのまとめを書いておきます。

そもそもCSSハックってなに？

CSSは同じ記述をしてもブラウザによって表示のされ方がまちまちになります。

そこで、特定のブラウザ・またはバージョンに対応したCSSの記述を追加してあげることで、

全てのブラウザでの見え方を統一する技術のことです。

通常のスタイルの下に各ブラウザごとのCSSの記述を書くだけでOK！

簡単でしょ？

ブラウザごとの記述は下記のようになります。

.style {

<code>font-size: <code>12px\9; /* 全てのIE */

*<code>font-size: <code>12px; /* IE6とIE7 */

<code>font-size: <code>12px\; /* IE8のみ */

<code>font-size: <code>12px!important; /* IE7のみ */

_<code>font-size: <code>12px; /* IE6のみ */

}

@-moz-document url-prefix() {
　　　　 .style{
　　　　　　　　 <code>font-size: <code>12px;
　　　　 }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
　　　　 .style{
　　　　　　　　 <code>font-size: <code>12px;
　　　　 }
}

.style{

[<code>font-size: 12px;<br>}

*+html:first-child .style{
　　　　 <code>font-size: <code>12px;
}