Web制作(フリーランスWebデザイナー)

日にち2015/1/24
コーディング

WEBブラウザごとにCSSをハックさせる方法

この記事は書いてから 約 3年 経過しています。 1年以上経過しているので情報が古い可能性があります。

WEBブラウザごとにCSSをハックさせる方法

WEB制作で各ブラウザでデバッグした時、それぞれのブラウザでズレが生じたりdivが崩れたりする時があります。特にIEのバージョンごとに崩れ方が違ったりとWEBデザイナーを困らせているはずです。そんな時に皆さんは、CSSでハックをするかと思います。という事で、今回はハック方法を一覧でまとめたいと思います。Googleで検索すれば沢山の情報が出てきますが、基本なのでこちらでもまとめておきます。

表示崩れを直そう

CSSが各ブラウザごとに認識が違う場合があり、そういった場合にブラウザごとにCSSを効かせます。メインで使用されているIE、Firefox、Chromeのやり方を下記にコードを書いておきます。

Internet Exploreをハックする場合

IE8以下は省かせていただきます。

IE9のみ

.body:not(:target){color:#fff¥9;}

IE10のみ

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .body { color: #ffffff; }
}

IE11のみ

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .foo { color: red }
}

Firefoxをハックする場合

@-moz-document url-prefix() {
    body { margin-top: 0;}
}

Chromeをハックする場合

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body { margin-top: 0;}
}
facebook twitter

© 2013-2017 visual hallucination.