FireFox Quantum中outline被绝对定位子元素撑开，如何对齐Chrome表现？

我之前也碰到过这个Firefox和Chrome的兼容性问题，本质是两者对outline的渲染逻辑存在差异：Chrome里outline会严格贴合元素自身的布局边界，而Firefox会把超出父元素范围的绝对定位子元素也纳入outline的计算范围，最终导致outline被意外撑开。

下面给你两种可靠的解决方法，都能让Firefox的表现和Chrome完全对齐：

方法1：用box-shadow替代outline #

box-shadow在两大浏览器中的渲染逻辑更统一，它只会基于元素自身的盒模型尺寸生成阴影，不会被绝对定位的子元素影响。你只需要把原有的outline相关属性替换成对应的box-shadow配置：

#outer-div { background-color: gray; }
#inner-div {
  background-color: green;
  box-sizing: border-box;
  width: calc(100% - 20px);
  position: relative;
  /* 替换原outline和outline-offset */
  box-shadow: inset 0 0 0 2px red; /* 模拟outline-offset: -2px的内阴影效果 */
  vertical-align: baseline;
  margin-left: 20px;
}
#terrible-expander { height: 20px; width: 3px; background-color: blue; position: absolute; left: -20px; }

这里用inset内阴影完美还原了你原来outline向内偏移2px的视觉效果，而且在Firefox和Chrome中都会只贴合inner-div的自身边界。

方法2：使用伪元素模拟outline #

如果你一定要保留outline的语义（或者有其他特殊需求），可以给inner-div添加一个伪元素，让伪元素完全继承父元素的尺寸，再把outline应用在伪元素上。这样伪元素的边界不会受绝对定位子元素的影响：

#outer-div { background-color: gray; }
#inner-div {
  background-color: green;
  box-sizing: border-box;
  width: calc(100% - 20px);
  position: relative;
  vertical-align: baseline;
  margin-left: 20px;
  /* 确保伪元素相对于自身定位 */
}
#inner-div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  outline: 2px solid red;
  outline-offset: -2px;
  pointer-events: none; /* 避免伪元素干扰父元素的交互 */
}
#terrible-expander { height: 20px; width: 3px; background-color: blue; position: absolute; left: -20px; }

这个方法的核心是让伪元素完全贴合inner-div的布局边界，outline作用在伪元素上，自然不会被超出范围的绝对定位子元素撑开。

你可以根据自己的实际场景选择其中一种方法，两种都能完美解决Firefox和Chrome的表现不一致问题。

内容的提问来源于stack exchange，提问作者scipper