次の簡単なコード例を検討してください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style=" height:100%; width:100%; background:yellow; " >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE9 Min-Width Problem</title>
</head>
<body style=" width:100%; height:100%; margin:0; background:green;">
<div style=" position:relative; min-width:300px; max-width:100%; margin:auto; background:red; ">
<div style=" position:relative; min-width:0; max-width:600px; margin:auto; padding:10px; ">
<div style=" position:relative; width:100%; height:600px; background:blue; ">
Page contents go here.
</div><!-- closes content -->
</div><!-- closes inner-wrapper -->
</div><!-- closes outer-wrapper -->
</body>
</html>
私の Web サイトでは、これに似たコードを使用して、最小幅と最大幅を備えた流動的なページ レイアウトを実現しています。これは、驚きの驚き、Internet Explorer を除くすべてのブラウザーで美しく機能します。何らかの理由で、最初にページを読み込んでサイズを変更 (またはズームイン) すると、HTML 要素のサイズが変更されないため、すぐに水平スクロール バーが表示され、HTML の背景が右側に表示されます。ただし、ページを更新すると、問題は完全に解消され、IE は他のすべてのブラウザーと同じように動作します。この問題が発生するのは、ページの最初の初期ロード時のみであるため、ページを更新した場合は、サイトを離れてサイトに戻る必要があります。
これは、Web ページがサーバー上にある場合にのみ発生するように見えることに注意してください。html ファイルをローカルで表示すると、このバグは頭に浮かびません。そのため、何が起こっているのかを理解するのを手伝ってくれる親切な人のために、このコードをテストサーバーにアップロードする自由を取りました。
http://pace-testing.net84.netのページを表示
どなたか参考になる情報があれば、よろしくお願いします。これには、(1) 修正 (2) 回避策、または (3) 目的を達成するためのより良い方法が含まれます。この投稿を頻繁にチェックするので、質問があればお知らせください (この投稿については髪を伸ばしているので、修正したいと思っています)。
追加情報: Windows 7 32 ビットで Internet Explorer 9.0.8 を実行しています。XHTML 1.0 Strict Doctype により、ブラウザーは Internet Explorer 9 標準モードになっています。