Internet Explorerが@mediaの画面を無視する

Question

私はウェブページのレスポンシブデザインに取り組んでいます。フォームをレンダリングするために、いくつかのデータをajaxでロードしています。理由を見つけることができない、レンダリング後にインターネットエクスプローラのブラウザが、その幅が768pxよりも小さいと思う理由（私の応答テンプレートを使用する）これはie9以上で実行する必要があります。すべてのアイデア、なぜ唯一つまりは@mediaを無視するか、それが動作しない理由は別の問題が存在し得る：

@media only screen and (max-width:767px){ 
#topmenu-responsive{ 
width: 80%; 
} 
} 

は、私が試してみてください。

<meta http-equiv="X-UA-Compatible" content="IE=edge,9,10,chrome=1"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

が、まだ何も。

Answer 1

あなたのコードは完全ファインワーク。このURLをチェックしてくださいDiffrent Diffrent Browser。私もそれをチェックする。

を参照してくださいライブデモHere

スニペット例は

@media only screen and (max-width:767px){ 
 
#topmenu-responsive{ 
 
width: 80%; 
 
background:red; 
 
border:1px solid black; 
 
} 
 
}

<meta http-equiv="X-UA-Compatible" content="IE=edge,9,10,chrome=1"/> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
<div id="topmenu-responsive"> 
 
topmenu-responsive Div 
 
</div>

インターネットエクスプローラ11

答えを

FirFox