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 中看起来符合预期:

并且在 Quantum 中被搞砸了(IMO):

这是 fiddle

我的问题

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

Answer 1

我设法修复了它，因此两个浏览器的行为相同，方法是将属性 position: relative; 从 #inner-div 移动到 #outer-分区。这是 working fiddle