Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

[CSSハック]ブラウザによってレイアウトが崩れる対処法まとめ

$
0
0

はじめに

先日私が、ホームページ作成中にぶつかった問題です。
ホームページが「できた!」と思い、他のブラウザで確認するとレイアウトがかなり崩れているという出来事がありました。
調べてみると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の記述をなくす
・問題の出る要素を囲っている divline-heightを指定する。
・問題の出る要素に widthまたは heightを指定する。
・問題の出る要素の中の要素に position:relativeを指定する。
clearfloatを解除する

さいごに

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


Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>