相对定位的锚点(IE Woes)

Question

我正在定位一个锚点:

#test-link

因为我需要它,所以当我访问display: block页面跳转到特定部分,但高出100px.否则页面会向我的需要滚动太远.

这在合适的浏览器中工作正常,但在IE7,8和9中,相对定位完全被忽略.

我已经尝试了不同的方法来修复它,例如向锚添加文本以及各种CSS属性(例如#test-link)但是没有任何区别.

有没有人有任何想法？

Answer 1

果然，IE7 到 IE10 不会转到相对定位的元素（而是转到其自然位置）。有一个例外，IE8 的工作正如我所预期的那样。除了 IE 之外，我检查过的几乎所有浏览器都按预期工作。

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

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

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

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

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

你可以用它padding来填充

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

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