FireFox Quantum 中的大纲扩展了 child 个 div

Question

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

进行扩展

<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-div。这是 working fiddle

FireFox Quantum 中的大纲扩展了 child 个 div

Outline in FireFox Quantum gets expanded by child divs

html

css

firefox

firefox-quantum