制表符在 Firefox 中正确对齐，但在 Chrome 中未对齐 - 为什么？

Question

我遇到 Chrome 和 Firefox 之间的制表符对齐不一致的情况。在提供的示例中，Firefox 正确对齐选项卡，而 Chrome 则破坏垂直对齐。我需要帮助了解为什么会发生这种情况以及如何解决它。

复制步骤：

在 Firefox 中打开此 JSFiddle：https://jsfiddle.net/hpft9581/4/

在 Chrome 中打开同一个 JSFiddle。

观察标签后文本的对齐方式。

预期行为（Firefox）：

制表符 ( ) 垂直对齐，创建一致的缩进：

实际行为（Chrome）：

标签未对齐，导致间距不均匀：

HTML：

<div class="container">
  <div class="justify-font">
    <p>
      <speaker><span id="1"></span></speaker> In publishing an
    </p>
    <p>
      <speaker><span id="2"></span></speaker> In publishing anqweqweqweqweqweqweqweqweqweqweqwe
    </p>
  </div>
</div>

CSS：

.justify-font {
  text-align: justify;
  text-align-last: left;
  tab-size: 12; /* Explicit tab size */
  font-size: 23px;
  white-space: pre-wrap; /* Preserve whitespace */
  word-wrap: break-word;
}

.container {
  width: 700px;
  max-width: 700px;
  margin: auto;
}

JavaScript：

document.getElementById("1").innerText = '\t' + "John Snow";
document.getElementById("2").innerText = '\t' + "John Snowssssss";

问题：

与 Firefox 相比，为什么 Chrome 会错位制表符？

如何在不依赖特定于浏览器的怪癖的情况下实现一致的跨浏览器选项卡对齐？

Answer 1

尝试将预行分配给空白元素而不是预换行。我在您共享的 JSFiddle 上测试了它，它折叠了 chrome 实现中看到的额外空白。