1

以下のような単純なdivがあります。ここでの問題は、divgpsDataDivとmapdivinIEの間にギャップがあります。次に、gpsDataDivは、このメソッドdocument.getElementById（ "gpsDataDiv"）。innerHTML=htmlStringを使用する動的テーブルを持つフィールドです。また、IEでは、テーブルはすぐ下にあり、たとえば400pxで停止しないため、chromeやfirefoxのようにスクロールバーは生成されません。

 <body>
 <div id="left" style="width:220px;height:350px;float:left;background:white;">
      <div id="gpsDataDiv" style="overflow: auto; max-height: 400px;background:white;"></div>
</div>
 <div id="map" style="top:0px;left:220px;height:100%">Map goes here.
  </div>    
 </body>
4

2 に答える 2

3

id を持つ divはスタイリングにmapありませんがposition:absolute、これは別のスタイルシートにあるものですか?

いくつかの提案:

1.

float:left;絶対配置要素（？）との混合。overflow:hiddenコンテナ (この場合は本体) がコンテナに適用されているか、代わりにclearfixを使用していることを確認する必要があります。これにより、コンテナが折りたたまれなくなり、ページのさらに下に問題が発生する可能性があります。

2.

第二に、各ブラウザ向けの個別のスタイルシートを使用するか（つまり、特定のスタイルシートを検索してみてください）、html要素でクラスを使用する私のアプローチを試すことで、異なるブラウザでスタイルを変更できるはずです

<!--[if lt IE 7 ]> <html class="ie6" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en" xml:lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="en"> <!--<![endif]-->

3.

ページに doctype があることを確認してください。以下の html 5 doctype を使用してみてください。doctype を指定しない場合、ページは互換モードになる可能性があります。これは絶対に望んでいないことです。

<!DOCTYPE html>

4.

オンに変更max-height: 400px;してみてくださいheight: 400pxid="gpsDataDiv"

これらのいずれかが役に立たない場合は、問題の jsfiddle をまとめていただけますか? あなたのためにデバッグするのに役立ちます:)

于 2012-07-12T09:16:35.893 に答える
1

私はあなたの問題を再現しようとしました。高さ: 400px を gpsDataDiv に追加すると、IE で正しく表示されるようです。

于 2012-07-12T09:19:55.920 に答える