css - 当您从固定标题转到部分时使用偏移量在每个浏览器中工作不同

Question

正如您在此 JSFiddle 中看到的那样我有一个固定的 header ，其中包含指向页面不同部分的链接。

.header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(255, 245, 255, 0.9);
    border: 1px solid grey;
    padding: 5px;
}
.goto {
    padding-top: 20px;
}

我想在单击链接时给出一个偏移量，以便标题不会覆盖该部分的开头。这就是为什么我给 anchor 这个顶部填充。

问题是这在 Firefox 和 IE11 上工作正常，但在 Chrome 和 Opera 上却不行。

如何解决这个问题？

Answer 1

您正在对 inline 元素 (a) 应用填充。如果您将 a 设为 block，您的填充将起作用:

.goto {
    padding-top: 20px;
    display: block;
}

Working demo