はじめに
先日私が、ホームページ作成中にぶつかった問題です。
ホームページが「できた!」と思い、他のブラウザで確認するとレイアウトがかなり崩れているという出来事がありました。
調べてみると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
@mediaalland(-ms-high-contrast:none){body{background-color:#000;}}
Edgeのみ
sample.css
@supports(-ms-ime-align:auto){body{background-color:#bbb;}}
Chromeのみ
sample.css
@mediascreenand(-webkit-min-device-pixel-ratio:0){body{background-color:#ccc;}}
Firefoxのみ
sample.css
@-moz-documenturl-prefix(){body{background-color:#ddd;}}
Safariのみ
sample.css
@mediascreenand(-webkit-min-device-pixel-ratio:0){_::-webkit-full-page-media,_:future,:rootbody{background-color:#eee;}}
それでもレイアウトにズレが生じる場合
以上のようにCSSを記述してもCSSハックが生じる場合、次の対処法を適用することで直る可能性があります。
・IE11において 問題の出る要素のdisplay:flex
の記述をなくす
・問題の出る要素を囲っている div
に line-height
を指定する。
・問題の出る要素に width
または height
を指定する。
・問題の出る要素の中の要素に position:relative
を指定する。
・clear
でfloat
を解除する
さいごに
完璧だと思っていたレイアウトが崩れていた時は、イラッとしますが、根気強く1つ1つ対処していきましょう。
他にもCSSハックの対処法がありましたら教えてもらえると嬉しいです。