锚点无法使用隐藏的溢出 [Microsoft Edge]

Question

Edge 可能不想滚动到不可见的内容上。如果锚元素超出其父维度并溢出：隐藏，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>

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

它在 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 配合。

锚点无法使用隐藏的溢出 [Microsoft Edge]

Anchor not working with overflow hidden [Microsoft Edge]

html

css

overflow

microsoft-edge