internet-explorer - 相对定位 anchor (IN Word)

Question

我像这样定位一个 anchor :

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

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

这在体面的浏览器中工作正常，但是在 IE7、8 和 9 中，相对定位被完全忽略。

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

Answer 1

果然，IE7 到 IE10 不会去相对定位的元素(而是去它的自然位置)。有一个异常(exception)，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 */
}