Chrome中绝对定位元素应显示为block却呈现inline的渲染问题

代码示例 #

CSS代码 #

.container {
  background: tan;
  position: relative;
  max-width: 100px;
  white-space: nowrap;
}

.inner {
  background: rgb(124, 182, 233);
  position: absolute;
}

HTML代码 #

<div class="container">
  This is the long long text
  <span class="inner">This is the long long text</span>
  <!-- this is $0 -->
</div>

问题现象 #

针对代码中标记为$0的<span>元素，调用getComputedStyle($0).display得到的计算样式值为block，但在Chrome 119.0.6045.159 (Official Build) (arm64)浏览器中，该元素实际渲染表现为inline特性（文字随外部文本同行显示）。

浏览器表现对比 #

Chrome渲染效果 #

Safari渲染效果（符合预期） #

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