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

投稿者： くりりん
カテゴリー： マークアップ >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タグも確認してみてください。