忘れないための各ブラウザごとの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;
}

 

You may also like...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です