为什么这个 HTML 在 Google Chrome 和 Firefox 中产生两个不同的结果？

Question

我有一个 <span> 文本元素，它有一个 relative 位置和一个 child <span> 有一个带有彩色背景的绝对位置，但它没有'似乎无法在 Firefox 浏览器上正常工作。我正在使用 Tailwind CSS ^2.2，这里是 HTML 代码片段：

<h1 class="max-w-md mx-auto mt-1 text-blue-900 block text-[2rem] tracking-tight font-bold sm:text-5xl lg:text-4xl xl:text-5xl leading-snug sm:leading-snug lg:leading-snug xl:leading-snug">
  The premier
  <span class="relative px-0.5 whitespace-nowrap z-10">Spanish<span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-blue-50" style="z-index:-1;"></span></span>
  immersion school of
  <span class="relative px-0.5 whitespace-nowrap z-10"> Los Angeles <span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-red-100" style="z-index:-1;"></span></span>
</h1>

这是 Chrome 中结果的屏幕截图：

下面是 Firefox 中的结果截图：

如您所见，“洛杉矶”的背景没有正确应用。

我还在这里创建了一个 Tailwind Play 组件：https://play.tailwindcss.com/zCdDLVtjAE。您可以在不同的浏览器中打开它以查看差异。是什么导致了这种差异？您认为我可以更改哪些内容以使其在不同浏览器之间保持一致？

Answer 1

尽管不确定确切原因，但这是由于“洛杉矶”中额外的前导 space。如果你把它改成“洛杉矶”就可以了。

<h1 class="max-w-md mx-auto mt-1 text-blue-900 block text-[2rem] tracking-tight font-bold sm:text-5xl lg:text-4xl xl:text-5xl leading-snug sm:leading-snug lg:leading-snug xl:leading-snug">
  The premier
  <span class="relative px-0.5 whitespace-nowrap z-10">Spanish<span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-blue-50" style="z-index:-1;"></span></span>
  immersion school of
  <span class="relative px-0.5 whitespace-nowrap z-10">Los Angeles <span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-red-100" style="z-index:-1;"></span></span>
</h1>

演示：https://play.tailwindcss.com/zCdDLVtjAE

为什么这个 HTML 在 Google Chrome 和 Firefox 中产生两个不同的结果？

Why Is this HTML producing two different results in Google Chrome and Firefox?

html

css

firefox

google-chrome

tailwind-css