html - FireFox Quantum 中的大纲由子 div 扩展

Question

我在 FireFox Quantum 中偶然发现了一个奇怪的行为，其中 div 的轮廓似乎可以通过绝对定位的子 div 扩展：

<div id="outer-div">
  <div id="inner-div">
    <div id="terrible-expander"></div>
    hello outline
  </div>
</div>

#outer-div {
  background-color: gray;
}

#inner-div {
  background-color: green;
  box-sizing: border-box;
  width: calc(100% - 20px);
  position: relative;
  outline: 2px solid red;
  outline-offset: -2px;
  vertical-align: baseline;
  margin-left: 20px;
}

#terrible-expander {
  height: 20px;
  width: 3px;
  background-color: blue;
  position: absolute;
  left: -20px;
}

这个例子在 Chrome 中看起来和预期的一样：

并且在量子中搞砸了（IMO）：

这是小提琴

我的问题

在这种情况下，有没有办法使 FireFox Quantum 的行为与 Chrome 的行为保持一致？

Answer 1

我设法修复它，因此两个浏览器的行为相同，方法是将属性position: relative;从移动#inner-div到#outer-div. 这是工作小提琴