IEでメディアクエリーが作動しない

IEでメディアクエリーが作動しない

WEBサイトのデザインをする時には、各種ブラウザでの動作を確認しなければなりませんね。

結構IEでしか作動しないタグやIEでは効かないスタイルがあったりします。

しかし、IEもバージョンごとに動作が違っているし・・・※IEはもう最新版(11)だけ追従しておけばよいと思いますが、今度はMicroSoftの「Edge」での動作確認が必要になってくるわけで。
他にChromeとFirefoxは確認必須ですから、シビアなデザインをしている時は結構大変ですね。

で、今回、ハマった・・・orz

スマホ対応のレスポンシブデザインについて書きましたが、ど~~~してもIEで狙ったような動作をしてくれない。(他のブラウザではすべて正常動作する、MSのEdgeも正常)

色々いろいろ確認してみて、最終的にIEの独自仕様かと言う疑いが出て来たので調べてみたら・・・

原因はIEの「互換表示」機能でした。。。orz

IEが互換モードになっていると、メディアクエリーが作動しない模様。

  ↓↓↓ ↓↓↓ ↓↓↓ ↓↓↓

互換モードオフを強制するように、ヘッダにメタタグを追記すればOKのようです。

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


スポンサーリンク
スポンサーリンク

記事をシェアする