`display: inline-block` 在放大时仅在 safari 中导致水平空间

Question

这是我的 html 和 css

body {
  font-family: monospace;
  text-align: center;
  color: white;
  margin: 0;
  padding: 0;
}
.no-white-spc {
  font-size: 0;
  line-height: 0;
}
.row {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}
.text {
  background-color: #000000;
  padding: 9px;
  line-height: 12px;
  font-size: 12px;
}

<div id="container" class="no-white-spc">
  <div class="row no-white-spc">
    <div class="text">
      Foo
    </div>
  </div>
  <div class="row no-white-spc">
    <div class="text">
      Bar
    </div>
  </div>
</div>

这里没有意外。当您在 Safari 中查看并放大时会出现此问题。在不同的缩放级别，您会看到两个

.row

s

之间出现随机间隙

这里是用一些 js 显示框尺寸的相同示例。

const containerEl = document.querySelector("#container");
const texts = document.querySelectorAll(".text");
const debugEl = document.querySelector("#debug");

new ResizeObserver(() => {
  debugEl.textContent = `Container: ${containerEl.clientWidth}w X ${containerEl.clientHeight}h px`;
  texts.forEach(r => {
    r.textContent = `Row: ${r.clientWidth}w X ${r.clientHeight}h px`;
  })
}).observe(containerEl);

body {
  font-family: monospace;
  text-align: center;
  color: white;
  margin: 0;
  padding: 0;
}

.no-white-spc {
  font-size: 0;
  line-height: 0;
}

.row {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

.text {
  background-color: #000000;
  padding: 9px;
  line-height: 12px;
  font-size: 12px;
}

<div id="container" class="no-white-spc">
  <div class="row no-white-spc">
    <div class="text">
      Foo World
    </div>
  </div>
  <div class="row no-white-spc">
    <div class="text">
      Bar World
    </div>
  </div>
</div>
<pre id="debug" style="color:black;"></pre>

奇怪的是，在 Safari 中，行高 (

30px + 30px

) 加起来不等于容器的高度 (

59px

)。在 Chrome 和 Firefox 中，容器的高度是预期的

60px

。

这感觉像是 Safari 中的一个错误。它不会发生在 Chrome 或 Firefox 中。鉴于在

display:inline-block

s

 上使用 

.row

的限制，有谁知道解决此问题的方法