技術屋のメモ | HTML,CSS,JavascriptなどWEB/アプリ開発技術メモ

ホームページ制作会社勤務のプログラマによるWeb系の技術・iOS/Androidアプリ開発・SEO対策などをご紹介いたしております。

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

by · 公開済み · 更新済み

今回は自分用のメモ代わりにブラウザごとの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;
}

 

コメントを残す

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