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

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

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

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

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

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

CSSハックの記述方法

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

簡単でしょ?

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

ieIEハック

.style {
     font-size: 12px\9; /* 全てのIE */
     *font-size: 12px; /* IE6とIE7 */
     font-size: 12px\0; /* IE8のみ */
     font-size: 12px!important; /* IE7のみ */
     _font-size: 12px; /* IE6のみ */
}

firefoxFirefox

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

chome safariGoogle ChomeとSafari

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

.style{

     [font-size: 12px;
}

operaOpera

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

 

コメントを残す

メールアドレスが公開されることはありません。