相对定位的锚点（IE Woes）

Question

我正在定位一个锚：

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

因为我需要它，所以当我访问#test-link时，页面跳转到特定部分，但高出100px。否则页面会向我的所需内容滚动太远。

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

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

有没有人有任何想法？

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 */
}