internet-explorer - 相对定位锚（IE Woes）

Question

我正在定位这样的锚：

#test-link {
    position: relative;
    bottom: 100px
}

因为我需要它，以便当我访问#test-link页面时跳转到该特定部分，但高出 100 像素。否则页面滚动得太远，无法满足我的需要。

这在体面的浏览器中运行良好，但在 IE7、8 和 9 中，相对定位被完全忽略。

我尝试了不同的方法来修复它，例如将文本添加到锚点以及各种 CSS 属性（例如display: block），但是没有任何区别。

score 2 · Accepted Answer

果然，IE7 到 IE10 并没有去相对定位的元素（而是去它的自然位置）。有一个例外，IE8 就像我预期的那样工作。除了 IE 之外，我检查的几乎所有浏览器都按预期工作。

这似乎是相对定位的问题，因为尝试使用绝对定位在 IE6 到 IE10 中工作得很好。这当然对您的情况没有帮助，因为您正在尝试相对定位。

在玩了一段时间后我发现的唯一解决方案是使用边距复制相对定位：

#movedElement {
    display: block;
    margin: -100px 0 100px;
}

这给了我们在其他浏览器中看到的类似结果，在所有版本的 IE 中。我理解，这并不理想，但在找到更好的信息之前可能就足够了。

我将继续研究这一点，并在我了解更多信息时返回。

同时，在目标区域之前添加一些空白的另一种常见方法是添加边距以扩展该元素上方的空间。这就是我在http://jsfiddle.net/Px6r9/1/show/#foo在线查看的示例中所做的。

#paddedContent {
    padding-top: 50px; /* Adds whitespace above content */
}

1 回答 1