2

IE9デスクトップの@mediaクエリで問題が発生しました。誰かがブラウザのサイズを変更すると、「画面」サイズに基づいて全体のレイアウトが変わるサイトを作成しました。画面サイズに合わせてレイアウト全体が変更されます。

ただし、デスクトップ上のIE9に関しては、何も起こりません。元のレイアウト（1024解像度用に構築）が表示されます。したがって、たとえば768画面サイズ（またはそれ以下）の人は、レイアウトが「ブリード」しているのを目にします。ITは彼らにとって変わりません。

このサイトはChorme、Firefox、さらにはOperaでも機能しますが、IE9デスクトップでは機能しません。

これが私の呼びかけです：

@media screen and (min-width: 768px) and (max-width: 959px){
bunch of settings
}

@media screen and (min-width: 480px) and (max-width: 767px){
bunch of settings
}

@media screen and (max-width: 320px) {
bunch of settings
}

^^^ブラウザのサイズを小さくすると、IE9でこれらが認識されません。

助けてください。

4

2 に答える 2

1

CSS3 メディア クエリは IE9 でサポートされているため、メディア クエリが機能するはずです。私の当面の推測では、互換表示をオンにしてオフにすると、メディアクエリが機能するはずです。

最終的なメディア クエリを次のように更新しました。

@media screen and (max-width: 479px) {
    bunch of settings
}

私の推測では、ie9 ブラウザーのサイズを変更すると、最大幅の 320 に達することはありません。320 から 480 の間のどこかにスタックしているため、メディア クエリの設定が満たされていないため、デフォルトで 1024 になります。最大幅を以前のビューポートの最小値 (480-1 = 479) の 1 つ下に変更すると、この問題は解決します。

それか、クエリ内のルールに問題があり、ie9 は認識できませんが、他のブラウザには問題はありません。

于 2012-07-06T14:54:43.860 に答える
-1

IE9 はメディア クエリをサポートしています。注文ラウンドを切り替えると、機能するはずです。

@media screen and (max-width: 320px) {
   bunch of settings
}

@media screen and (min-width: 480px) and (max-width: 767px){
   bunch of settings
}

@media screen and (min-width: 768px) and (max-width: 959px){
   bunch of settings
}
于 2012-07-06T14:58:56.773 に答える