Safari缩放时display:inline-block元素出现水平间隙的解决办法

问题现象 #

正常显示无异常，但在Safari浏览器中放大页面时，两个.row元素之间会出现随机间隙。进一步调试发现，两行高度总和（30px+30px）不等于容器高度（59px），而Chrome和Firefox中容器高度符合预期为60px，这是Safari的渲染Bug。

原始代码 #

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;
}

HTML

<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>

调试代码（显示盒子尺寸） #

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);

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;
}

HTML

<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>

解决方案（必须保留.row的display:inline-block） #

方案1：优化垂直对齐与硬件加速 #

替换.row的垂直对齐方式，并开启硬件加速优化Safari像素渲染：

.row {
  width: 100%;
  display: inline-block;
  vertical-align: bottom; /* 替换原vertical-align: top */
  transform: translateZ(0); /* 触发硬件加速，修正像素渲染偏差 */
}

方案2：负margin抵消间隙 #

针对Safari的像素取整问题，用极小的负margin抵消随机间隙：

.row {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -1px; /* 可根据实际情况调整为-0.5px */
}

方案3：强制容器高度计算准确 #

给容器设置height: fit-content，确保其高度准确包裹子元素：

#container {
  height: fit-content;
}

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