Chromium 与 Safari 中嵌套网格元素大小的差异

Question

嵌套网格项与网格上的

justify-items: center

以及子项上的

object-fit: contain

和

width: 100%

的这种特定组合在 Chromium/Firefox 与 Safari 中会产生不同的子项宽度。

我的问题是：（1）根据规范，哪一个是正确的。 (2) 查找报告行为差异的任何错误跟踪问题。

#grid {
  display: grid;
  justify-items: center;
}

img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: red;
}

<div id="grid">
  <div id="container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
  </div>
</div>

尝试：https://codepen.io/eyaler/pen/qEWVwjy

左侧的 Chromium 与右侧的 Playwright/Webkit：

Answer 1

浏览器之间存在渲染问题，特别是当涉及较新的技术（如网格）时。在这种情况下，您应该能够通过简单地删除

width: 100%

来实现跨浏览器一致性。

#grid {
  display: grid;
  justify-items: center;
}

img {
  /* width: 100%; */
  height: 300px;
  /* object-fit: contain; */
  background: red;
}

<div id="grid">
  <div id="container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png">
  </div>
</div>