Question

我们有简单的div如下。这里的问题是div gpsDataDiv和map div inIE之间存在差距。其次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>

Answer 1

ID为map的div在样式中没有position:absolute，这是您在单独的样式表中的内容吗？

一些建议：

<强> 1

您的混合float:left;与绝对定位的元素（？）。您需要确保容器（在这种情况下是正文已应用overflow:hidden），或者使用clearfix。这样可以防止容器倒塌，并可能导致页面进一步出现问题。

<强> 2

其次，您应该能够通过使用针对每个浏览器的单独样式表（try a search for ie specific stylesheets）来改变不同浏览器中的样式，或者尝试在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: 400px更改为id="gpsDataDiv"

如果这些中的任何一个对你没有帮助，你能把你的问题放在一起吗？它会帮我调试它：）

Answer 2

我试图重现你的问题。如果我添加高度：400px到gpsDataDiv，它似乎在IE中正确显示。

IE显示两个div之间的差距，但不是铬

2 个答案: