Safari中text-align:center与word-spacing失效问题求助

我之前也踩过这个Safari的兼容性坑！问题出在Safari对word-spacing和行内伪元素的渲染逻辑上——其他浏览器会正确抵消li上的word-spacing:0和父元素的word-spacing，但Safari在计算整体居中时，会把父元素的word-spacing额外空间算进去，同时伪元素的word-spacing设置又没被正确处理，导致文本偏移。

咱们可以换两种更可靠的方式来实现需求，彻底避开这个bug：

方案一：inline-block + margin控制间距（兼容旧版浏览器） #

保留原HTML结构，修改CSS如下：

<ul class="test">
  <li><span>Longer Word 1</span></li>
  <li><span>Word 2</span></li>
</ul>
<br/>
<ul>
  <li><span>Longer Word 1</span></li>
  <li><span>Word 2</span></li>
</ul>

ul {
  display: block;
  width: 120px;
  border: 1px solid black;
  margin: 0;
  padding: 0;
  text-align: center;
  /* 移除word-spacing，改用margin控制元素间距 */
}

ul.test {
  width: 300px;
}

li {
  display: inline-block; /* 改为inline-block，方便用margin控制间距 */
  position: relative;
}

/* 给非最后一个li添加右侧间距，预留分隔符位置 */
li:not(:last-child) {
  margin-right: 20px;
}

/* 伪元素作为分隔符，定位在两个li的中间 */
li:not(:last-child):after {
  content: "";
  position: absolute;
  right: -10px; /* 刚好在margin的中间位置 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  background-image: url("https://static01.20min.ch/dyim/5dd8a8/T470,230/images/content/2/7/1/27109470/10/teaserbreit.jpg");
  width: 6px;
  height: 6px;
  background-size: cover; /* 确保图片完整显示 */
}

span {
  display: inline-block;
}

为什么这个方案有效？ #

• 用inline-block代替inline，配合margin-right控制元素间距，所有浏览器的计算逻辑完全一致，不会出现居中偏移。
• 伪元素通过绝对定位放在间距的中间，既保证了分隔效果，又不会干扰文本的居中计算。

方案二：Flex布局（更简洁，推荐） #

如果不需要兼容非常旧的浏览器，用Flex布局是更优的选择——它的居中逻辑在所有浏览器里都很稳定，还能自动处理换行情况：

ul {
  display: flex;
  flex-wrap: wrap; /* 宽度不够时自动换行 */
  justify-content: center; /* 天然水平居中 */
  gap: 20px; /* 控制元素之间的间距 */
  width: 120px;
  border: 1px solid black;
  margin: 0;
  padding: 0;
}

ul.test {
  width: 300px;
}

li {
  list-style: none;
  position: relative;
}

/* 给相邻的li添加分隔符，只有同一行的li才会触发这个选择器 */
li + li:before {
  content: "";
  position: absolute;
  left: -10px; /* 居中在gap的中间 */
  top: 50%;
  transform: translateY(-50%);
  background-image: url("https://static01.20min.ch/dyim/5dd8a8/T470,230/images/content/2/7/1/27109470/10/teaserbreit.jpg");
  width: 6px;
  height: 6px;
  background-size: cover;
}

span {
  display: inline-block;
}

这个方案的优势： #

• justify-content: center直接实现文本居中，完全不用依赖text-align和word-spacing，从根源上避免了Safari的bug。
• gap属性可以精准控制元素间距，比margin更简洁。
• 自动处理换行情况，换行后分隔符会自动消失，符合你“仅当同一行时显示分隔符”的需求。

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