IE・Safariでのレイアウト崩れや表示違い対策 CSSハックのまとめ

CSS

※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ハック一覧を紹介しました。
もちろん、ハックは使わないに越したことはありませんが(将来にわたって有効とは限らないため)、どうしても上手く表示できない時の回避技として知っておいて損は無いと思います。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Trackback(s)

Comment(s)

  1. 粉バナナ より:

    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にも効いてしまいますね。
      せっかく、お試しいただいたのに申し訳ありませんでした。


Leave a Reply