15

タグで非外部 CSS を使用するページが<style>あり、それらの<style>タグには次のメディア クエリがあります。

@media screen and (max-width:768px){
/* CSS */
}

すべてが Firefox で正常に動作しており、幅 768 ピクセル以下の CSS は必要な場合にのみレンダリングされます。ただし、IE9 では、このメディア クエリ内の CSS は、サイズに関係なくロード時にレンダリングされます。

ただし、ロードした後、ブラウザーのサイズを変更すると、デスクトップ バージョンとして再レンダリングされます。したがって、基本的に、IE9 の非外部スタイルシートは、一致しないメディア クエリ内にあるかどうかにかかわらず、すべての CSS をレンダリングしているように見えますが、ブラウザーのサイズが 1 ピクセルでも変更された場合は、正しい CSS をレンダリングします。

これで正確に何が起こっているのか、または簡単な修正があるかどうかを誰かが知っていますか? 私が考えることができた唯一の解決策は、CSS の順序を変更し、新しいメディア クエリを追加することで問題を回避することです。これは、コードの更新を容易にするために避けたいと考えています。

4

4 に答える 4

16

ie10 の外部 css ファイルで同様の問題が発生しました。クエリに最小 1px (0px は機能しないようです) を与えることで、それを修正しました。

これですべての問題が解決するわけではありませんが、あなたの問題には十分かもしれません。

@media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}
于 2013-11-01T10:27:08.790 に答える
2

IE 10 で発生していた同様の問題に遭遇しました。メディア クエリの分を設定しても、この特定の問題を解決するのに役立ちませんでした。少しの js を使用してウィンドウのサイズをまったく同じサイズに変更すると、IE で発生していた問題が修正されました。少し汚い感じですが、使えます。

$(document).ready(function() {
  var w = window.outerWidth;
  var h = window.outerHeight;
  window.resizeTo(w, h);
});
于 2015-08-14T17:13:54.277 に答える