相对定位的锚点（IE兼容性问题）

Question

我正在定位一个锚点，如下：

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

当我访问#test-link时，希望页面跳转到该特定部分，但比实际位置高100px。否则，页面会滚动太远，不符合我的需求。在较好的浏览器中，这很好用，但是在IE7、8和9中，相对定位完全被忽略了。我尝试了不同的修复方法，例如向锚点添加文本以及各种CSS属性（例如display:block），但没有任何改变。

- user1049944

---

请问您能分享一下目标元素的标记及其周围的内容吗？ - Sampson

Answer 1

确实，IE7到IE10不会去到相对定位的元素（而是去到它的自然位置）。有一个例外，IE8的表现与我预期的一样。除了IE之外，我检查的几乎所有浏览器都表现正常。

这似乎是一个与相对定位有关的问题，因为在IE6到IE10中尝试使用绝对定位就可以正常工作。当然，这并不能帮助你的情况，因为你正在尝试使用相对定位。

在玩弄了一段时间后，我找到的唯一解决方案是使用margin来复制相对定位：

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

这在所有版本的IE中产生了与其他浏览器相似的结果。虽然不是理想的解决方案，但在找到更好的信息之前可能足够使用。

我会继续研究并在学到更多知识后回来。

您可以使用 padding 来添加 内边距

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

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

- Sampson