为什么 Google Chrome 忽略 flex-box 内相对定位的元素中的 "top" css 属性？

Question

Google Chrome，介于版本 80 和 84 之间的某处似乎对其布局引擎进行了重大更改，导致下面的 HTML 呈现与以前不同。它也不同于 Firefox (v78) 或 Edge (v18)。

<head>
    <style>
        body { font-family: sans-serif; }
        .inner { border: 1px solid black; }
        .outer { display: flex; }
        span { position: relative; top: 50%; }
    </style>
</head>

<body>
  <div class="outer">
    <div class="inner">
      <span>Text</span>
    </div>
  </div>
</body>

Google Chrome v84 将其呈现为：

Firefox、Edge 和 Google Chrome <= v80 渲染如下：

虽然后面的渲染看起来“更丑”，但实际上是我期望的结果（基于 Firefox、Edge 和 Chrome 的 previous行为）。也就是说，由于 top: 50% css 属性，我希望文本相对于其包含的 div 向下移动 50%。但是Chrome的渲染似乎并没有改变是否指定top。

但是，我想指出的是，在查看 Chrome 和 Firefox 的 DevTools 时，所有布局属性的值似乎都相同，包括 top（显示为 9px同时）。因此，尽管 Chrome 名义上似乎以相同的方式解释布局，但渲染是不同的。

呈现方式的这种变化（以及浏览器之间的差异）导致使用 top: 50% 与 transform: translateY(-50%) 相结合的网站布局出现许多问题，以便在垂直方向上居中块另一个块定位元素——“经典”食谱，如 W3schools, LogRocket and others, e.g. here 所述。经典配方和我上面的配方之间的一个区别是 span 的位置是 relative 而不是绝对的。这允许 div.inner 的高度和宽度基于 span 的首选大小。在最近的 Chrome 更新之前，这一切都运行良好。

如果有人能解释渲染的差异或讨论 Chrome 最近的布局变化 and/or 在 Firefox、Chrome 和 Edge 中实现一致布局的变通方法，我非常感谢。

Answer 1

这是一个很常见的问题，我一直希望有人能解决...但是根据我目前所学，我觉得解决此类问题的唯一方法是研究浏览器扩展，像“webkit”、“moz”、“o”和“ms”，开发人员现在将开始为网络浏览器指定屏幕尺寸规格。注意（webkit 适用于 chrome 和 apple safari，我会喜欢收到你的回复。祝你好运

Answer 2

这是 Chrome 84 上的 bug，目前正在修复。

为什么 Google Chrome 忽略 flex-box 内相对定位的元素中的 "top" css 属性？

Why does Google Chrome ignore "top" css property in a relatively-positioned element inside a flex-box?

html

css

layout

google-chrome

cross-browser