css - IE 9 css 定位问题

Question

更新了代码和屏幕截图以更好地遵循 SO 的规则 - 向 Rocket 致敬

谁能告诉我，为什么这个页面

http://drivetimekl.mapicture.com/results/be50f539b0a7134cd2d0

在 Chrome(正确显示)和 IE 9(不正确显示)中看起来不一样吗？

Chrome 屏幕截图:http://i59.tinypic.com/308l5dl.png

IE9 截图:http://i61.tinypic.com/33y24uc.png

在 IE 9 上，图例框下移， Logo 移出屏幕。

我将 leafletjs 用于 map ，除此之外，我只是尝试使用 position: absolute 和顶部或底部 css 属性定位 div。

有问题的 HTML 代码:

<div id="map"></div>
<div id="legend"></div>
<div id="legendTime">
  <ul class="legenTitle"></ul>
  <ul class="legendTime"></ul>
</div>
<div id="infoBoxDiv"></div>
<div id="maplogo">
  <a href="#"><img src="mapicture-logo.png" /></a>
</div>

图例和 mapLogo 的 css:

#legend {
  position: absolute;
  top: 70px;
  left: 13px;
  width: 285px;
  height: 210px;
  padding: 9px 0px 6px 20px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #fff;
  font: 14px Arial, Helvetica, sans-serif;
  color: #777;
}

#maplogo {
  position: absolute;
  bottom: 30px;
  left: 13px;
  width: 280px;
  height: 57px;
}

当我通过 Chrome 的调试器进行检查时，我可以看到 leaflet 的 map-div 获得了样式“position: relative;”。这会以某种方式干扰我的“position:absolute”吗？

Answer 1

您应该在#legend、#legendTime 和#maplogo 上使用z-index 属性。

添加例如:

z-index:100;

到#legend、#legendTime、#maplogo