これはどこかの質問と重複している可能性がありますが、それを生成するためのキーワードを思い付くことができません。
私は Google Maps API V3 を使用しており、https: //developers.google.com/maps/documentation/javascript/tutorial で提供されている簡単なチュートリアルに従っています。IE9 標準モードでレンダリングする IE9 を除いて、すべて問題ありません。問題は、マップが信じられないほど必要最小限の ASP.NET フォーム ページに読み込まれると、結果の HTML にdivマップのコンテナーが2 回含まれることです。チュートリアルで説明されているように、これによりレイアウトの問題が発生しています。
マップは常にそれを含む要素のサイズからサイズを取得することに注意してください。そのため、常に明示的にサイズを設定する必要があります。
そのため、div含まれている my map は、DOM 親と同じ値であるピクセル数または 100% に設定する必要があります。これは、HTML ソースが大まかに終わる FireFox と Chrome では問題ありません。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="no-layout"><form name="aspnetForm" method="post" action="TestPopup.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDw... />
</div>
<div class="map" />
</form></body>
</html>
しかし、IE9 では次のようになります。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="no-layout"><form name="aspnetForm" method="post" action="TestPopup.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDw..." />
</div>
<div class="map" />
</form>
<div class="map" />
</body>
</html>
このページは問題を (実際に) 単純化したものですが、マップ クラスには幅と高さが設定されているため、これは実際のページの問題です。このクラスの 2 番目divは同じスタイルで、コンテンツを押し下げます。