はじめに

先日私が、ホームページ作成中にぶつかった問題です。
ホームページが「できた！」と思い、他のブラウザで確認するとレイアウトがかなり崩れているという出来事がありました。
調べてみるとCSSハックというものが原因でした。
サイトを作成する上で必ず考慮しなければいけない項目となっているので初心者の方は必見です！

CSSハックってなに？

サイトをCSSでデザインする時に出てくる問題というのが、ブラウザごとでCSSにズレが起きてしまうということです。特にmargin・padding関係はブラウザごとにサイトを確認してみると位置がズレでいることが結構あります。画像が消えてしまったりすることもあります。その中でも特に顕著なのがIE(Internet Explorer)でサイトを表示した時にレイアウトが崩れてしまっていることが多いです。
そんな時に使える各ブラウザ・OSに対応するためのCSSハックをご紹介します。

各ブラウザに対応するCSSハック

以下の例では、bodyタグに背景色を指定するという命令を記述しています。

IE11

sample.css

_:-ms-lang(x)::-ms-backdrop, body {
    background-color: #aaa;
}

IE10

sample.css

@media all and (-ms-high-contrast:none) {
    body {
        background-color: #000;
    }
}

Edgeのみ

sample.css

@supports (-ms-ime-align:auto) {
    body {
        background-color: #bbb;
    }
}

Chromeのみ

sample.css

@media screen and (-webkit-min-device-pixel-ratio:0){
    body {
        background-color: #ccc;
    }
}

Firefoxのみ

sample.css

@-moz-document url-prefix(){
    body {
        background-color: #ddd;
    }
}

Safariのみ

sample.css

@media screen and (-webkit-min-device-pixel-ratio:0) {
    _::-webkit-full-page-media, _:future, :root body {
        background-color: #eee;
    }
}

それでもレイアウトにズレが生じる場合

以上のようにCSSを記述してもCSSハックが生じる場合、次の対処法を適用することで直る可能性があります。

・IE11において問題の出る要素のdisplay:flexの記述をなくす
・問題の出る要素を囲っている div に line-height を指定する。
・問題の出る要素に width または height を指定する。
・問題の出る要素の中の要素に position:relative を指定する。
・clearでfloatを解除する

さいごに

完璧だと思っていたレイアウトが崩れていた時は、イラッとしますが、根気強く1つ1つ対処していきましょう。
他にもCSSハックの対処法がありましたら教えてもらえると嬉しいです。