Safari 17中CSS特定height值导致元素垂直错位问题求助

问题描述 #

以下代码实现的信号柱状条在Chrome、Firefox中显示正常，但在Safari 17（Mac及iPadOS系统）中会出现柱状条基线偏移的渲染异常。奇怪的是，微调height的百分比数值（如80%改为79%）能临时修复，但这并非稳定解决方案。

原代码 #

CSS：

signal {
  display: inline-block;
  height: 1em;
  width: 1.5em;
  overflow: visible;
  white-space: nowrap;
}

signal>i {
  width: 20%;
  margin-left: 1px;
  display: inline-block;
  height: 40%;
  background-color: #7daa49;
}

signal>i:nth-child(2) {
  height: 60%;
}

signal>i:nth-child(3) {
  height: 80%;
}

signal>i:nth-child(4) {
  height: 100%;
}

HTML：

<signal class="q4"><i></i><i></i><i></i><i></i></signal>

效果对比 #

• 正确显示（Chrome/Firefox）：
  

• 错误显示（Safari 17）：
  

注：Safari中错位的柱状条不固定，有时是前两个，有时是中间的。

修复方案 #

方案1：强制子元素底部对齐（最简单） #

给signal>i添加vertical-align: bottom，直接修正inline-block元素默认的基线对齐逻辑，解决Safari的百分比高度计算偏差：

signal>i {
  width: 20%;
  margin-left: 1px;
  display: inline-block;
  height: 40%;
  background-color: #7daa49;
  vertical-align: bottom; /* 新增此行 */
}

方案2：改用Flex布局（更稳定的现代方案） #

用flex布局重构父元素，利用flex的对齐规则规避inline-block的渲染差异，同时用gap替代margin-left实现间距，代码更简洁：

signal {
  display: inline-flex; /* 替换为inline-flex */
  height: 1em;
  width: 1.5em;
  gap: 1px; /* 用gap替代margin-left */
  align-items: flex-end; /* 强制子元素底部对齐 */
}

signal>i {
  flex: 1; /* 均分宽度，替代20% */
  height: 40%;
  background-color: #7daa49;
}

/* 以下nth-child样式保持不变 */
signal>i:nth-child(2) {
  height: 60%;
}

signal>i:nth-child(3) {
  height: 80%;
}

signal>i:nth-child(4) {
  height: 100%;
}

方案3：绝对定位脱离文档流（兼容旧场景） #

如果需要保留父元素的inline-block属性，可通过绝对定位让子元素完全贴底，不受基线影响：

signal {
  display: inline-block;
  height: 1em;
  width: 1.5em;
  position: relative; /* 开启相对定位 */
  white-space: nowrap;
}

signal>i {
  width: 20%;
  display: block; /* 替换为block */
  height: 40%;
  background-color: #7daa49;
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 贴底对齐 */
}

/* 给每个子元素设置左侧偏移 */
signal>i:nth-child(1) { left: 0; }
signal>i:nth-child(2) { left: calc(20% + 1px); height: 60%; }
signal>i:nth-child(3) { left: calc(40% + 2px); height: 80%; }
signal>i:nth-child(4) { left: calc(60% + 3px); height: 100%; }

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