Question

更新了代码和屏幕截图，以便更好地遵循SO的规则 - 帽子提示火箭

任何人都可以告诉我，为什么这个页面

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上，图例框向下移动，徽标移出屏幕。

我使用leafletjs作为地图，除此之外我只是尝试使用position：absolute和top或bottom 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>

传说中的css和mapLogo：

#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的调试器进行检查时，我可以看到传单的map-div获得了样式＆＃34; position：relative;＆＃34;。这是否会以某种方式干扰我的位置：绝对＆＃34;？

Answer 1

你应该在＃legend，＃legendTime和#maplogo上使用 z-index 属性。

添加例如：

z-index:100;

到 #legend ， #legendTime ， #maplogo

IE 9 css定位麻烦

1 个答案: