html - anchor 无法使用隐藏的溢出 [Microsoft Edge]

Question

Edge 可能不想滚动到不可见的内容上。如果 anchor 元素超出其父维度并溢出:隐藏，Edge 浏览器将不会滚动到该元素上。

.box {
  width: 100%;
  height: 100vh;
}

.first {
  background-color: red;
}

.second {
    background-color: blue;
    position: relative;
    overflow: hidden;
}

#anchor {
  position: absolute;
  top: -20px; /* if you change back to 0, anchor will work */
  left: 0;
  width: 20px;
  height: 20px;
  background-color: yellow;
}

<div class="box first">
  <a href="#anchor">GO TO ANCHOR IN SECOND SECTION</a>
</div>

<div class="box second">
  <div id="anchor"></div>
</div>

我需要一个在他父级之外的 anchor ，它有溢出:隐藏，而 href 仍然在 anchor 上滚动。

它在 Chrome 和 Firefox 上运行良好。边缘版本:44.17763.1.0

Answer 1

这很奇怪，我无法告诉您 Edge 为何这样做。但是，您的示例的快速修复方法是通过添加

呈现一行不可见像素

 border-bottom: 1px solid transparent; /* this will overlap the parent element */
 background-clip: content-box; /* bg is not painted under border */

查看working here .如您所见，Edge 配合。