Date： | 
Category：
※2013年6月9日記事作成。2014年6月3日加筆修正。
サイトの制作や更新を行っていると、どうしてもブラウザ間で表示が異なる事象が出てしまいます。
言わずもがなIEの古いバージョンのレイアウト崩れは多いです。
そしてSafariも、表示フォントが変わってしまったりする場合があります。
で、通常の対策を行っても、ブラウザ間の表示違いを修正できないときに役立つのがCSSハックというテクニックです。
ちなみにCSSハックとは、各ブラウザの実装状況やバグを逆手に取り、ブラウザによって異なる宣言を読み込ませるための記述。
別の言い方をすると「IE6だけに読ませるスタイル」とか「safari2〜3.1のみに読み込ませるスタイル」を指定する記述です。
IE用のCSSハックまとめ
スポンサードリンク
紹介する情報は、2013年8月時点のものとなります。
以下、「.csshack」は命名したセレクタに、「font-size: 10px;」は適用したいスタイルに置き換えて、使用して下さい。
- IE6以下
- .csshack { _font-size: 10px; }
- IE6とIE7
- .csshack { /font-size: 10px; }
- IE7
- *+html .csshack { font-size: 10px; }
- IE8
- .csshack { font-size: 10px9; }
- IE9
- .csshack:not(:target){ font-size: 10px¥9; }
ちなみにIE10用のハックは、
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.csshack {
font-size: 10px
}
}
ですが、これはもしかするとIE11でバグが出てしまうかもしれません。
※11がリリースされるまで分かりません。
Safari用のCSSハックまとめ
「.csshack」は命名したセレクタに、「font-size: 10px;」は適用したいスタイルに置き換えて下さい。
- Safari2〜3
- html[xmlns*=””] body:last-child .csshack { font-size: 10px; }
- Safari2〜3.1
- html[xmlns*=””]:root .csshack { font-size: 10px; }
- Safari3以上およびChrome
- @media screen and (-webkit-min-device-pixel-ratio:0) { .csshack { font-size: 10px; }}
以上、IEとSafariのCSSハック一覧を紹介しました。
もちろん、ハックは使わないに越したことはありませんが（将来にわたって有効とは限らないため）、どうしても上手く表示できない時の回避技として知っておいて損は無いと思います。
超多機能でSEOに強い！ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード！最新技術が詰め込まれたWPテーマTHE THOR
Safari3以上
@media screen and (-webkit-min-device-pixel-ratio:0) { .csshack { font-size: 10px; }}
これだと、safari以外にも適応されちゃうみたいなので、
ハッキングできなかったです；；
でもありがとうございました。
＞粉バナナさま
ご指摘ありがとうございます。
@media screen and (-webkit-min-device-pixel-ratio:0) ですと、chromeにも効いてしまいますね。
せっかく、お試しいただいたのに申し訳ありませんでした。