WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

shima

2019/12/23

IEで原因不明の表示崩れが発生。そんなときは「X-UA-Compatible」の設定を確認!

投稿者: shima
カテゴリー: マークアップ >html



サイト制作時にFlexboxを使ってコンテンツを並べたはずが、IEで何故か崩れていることがありました。

ベンダープレフィックス追加しても崩れる…
原因を探るとmetaタグ「X-UA-Compatible」が原因でした。

「X-UA-Compatible」とは?

IE8のリリース時に一部の古いサイトで表示が崩れてしまうことが多く新しいIEでも古いモードで表示させるためにこの「互換モード」が追加されました。

以下のようにcontent=”IE=8″と記述をすれば、どのモードでもIE8の表示を見ることができます。

<meta http-equiv="X-UA-Compatible" content="IE=8">

互換表示をさせない

常に新しいモードで表示させるにはcontentに「IE=edge」と記述します。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

まとめ

metaタグ「X-UA-Compatible」はIE11がリリースされている今日ではあまり必要ないので大きくリニューアルができず古い表示でないと正しく表示されないといった場合のみ記述するのがよさそうです。

また、最新のcssの記述が反映されないときはmetaタグも確認してみてください。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ