19

IE9でのみ発生する奇妙な問題が発生しています。デスクトップレイアウトとモバイルレイアウトのWebページで作業しています。同じHTML、異なるCSS。問題は以下のコードで発生します：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)

IE9を除くすべてのブラウザは、必要に応じてデスクトップサイトを表示します。モバイルブラウザはモバイルレイアウトを正しく表示します。IE9の問題は、モバイルレイアウトも表示されることです。

上記のコードから「only」と「screen」という単語を削除すると、IE9はデスクトップサイトを正しく表示します。問題は、モバイルブラウザにもデスクトップサイトが表示されることです。私はこれについていくつかの調査を行いましたが、この問題については何も見ていません。

読んでくれてありがとう、

ジョン

4

5 に答える 5

32

これに対する回答を求めて誰かが SO をクロールしている場合に備えて、上記の 2 つの回答は、ここで回答されているコアの問題を解決していません - CSS メディア クエリが IE 9 で機能しない

基本的に、インライン CSS3 メディア クエリは IE9 で動作しますが、Compatibilty モードを無効にする必要があります -

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

上記のメタ タグは、他のメタ タグの前に配置する必要があります。そうしないと、IE9 はデフォルトで互換モードがオンになり、その後動作しなくなります。

于 2013-03-15T21:48:12.257 に答える
7

From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".

According to http://msdn.microsoft.com/library/ms530813.aspx it does not support those properties, only "min-width" and "max-width".

In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.

于 2011-07-19T19:48:20.307 に答える
5

はい、 の@media (max-width: 860px) 代わりに を使用しmax-device-widthます。

IE 9 で心臓発作を起こしてしまいました。プロジェクトのメディア クエリが機能しませんでした。

次に、数分間グーグルで調べた後、CSS を HTML に含める必要があります。インラインスタイルのみ！

これらの IE ブラウザは何と厄介なことでしょう。

于 2012-11-12T22:40:12.893 に答える