相对定位锚（IE Woes）答案

【问题标题】：Relatively Positioned Anchor (IE Woes)相对定位锚（IE Woes）
【发布时间】：2019-09-18 00:17:13
【问题描述】：

我正在像这样定位锚点：

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

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

这在不错的浏览器中运行良好，但是在 IE7、8 和 9 中，相对定位被完全忽略了。

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

我会继续研究这个，当我了解更多时会回来。

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

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

【讨论】：