相对定位锚(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中看到的smiliar结果。我理解这并不理想，但在找到更好的信息之前，这可能已经足够了。

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

您可以使用padding进行填充

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

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