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

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

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

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

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

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

CSSハックの記述方法

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

簡単でしょ?

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

ie
IEハック

.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のみ */
}

firefox
Firefox

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

chome
safari
Google ChomeとSafari

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

.style{

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

opera
Opera

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

 

コメントを残す

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