0

我在几个具有相对定位的 div 层上放置了一个大图像。我也在使用 top: -170px; 将图像拉到我需要的位置。它在 Firefox 中完美运行，但在 IE 中，它不会调整其下方蓝色条的位置以解释负顶部位置。

如果我没有意义，您可以查看实时开发站点：

http://www.suncastmedia.com/clients/ezbook/

如果您同时查看 Firefox 和 IE，您就会明白我的意思。这也是我针对这些特定 div 的 CSS。

#red-box {
  width: 100%;
  height: 343px;
  background: url('../images/bg-red.png') top left repeat-x;
  text-align: left;
}

#red-box-text {
  position: relative;
  left: 70px;
  top: 45px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  font-family: helvetica;
  width: 451px;
}

#spacer {
  width: 100%;
  height: 8px;
}

#blue-box {
  width: 100%;
  height: 29px;
  background: url('../images/bg-blue.png') top left repeat-x;
}

#pic-globe {
  position: relative;
  top: -170px;
  left: 52%;
  background: url('../images/pic-globe.png') top left no-repeat;
  width: 506px;
  height: 471px;
}
4

1 回答 1

1

你可以来回切换#pic-globe，#red-box-text然后添加float: right;到#pic-globe. 通常，如果您使用巨大的负边距，可能会有更简单的方法来做到这一点。

于 2012-09-06T04:06:18.043 回答