为啥这个 HTML 在 Google Chrome 和 Firefox 中会产生两种不同的结果？

Posted 2023-03-07

【中文标题】为啥这个 HTML 在 Google Chrome 和 Firefox 中会产生两种不同的结果？

【英文标题】：Why Is this HTML producing two different results in Google Chrome and Firefox?为什么这个 HTML 在 Google Chrome 和 Firefox 中会产生两种不同的结果？

【发布时间】：2021-11-06 15:05:29

【问题描述】：

我有一个具有relative 位置的<span> 文本元素和一个具有彩色背景的绝对位置的子<span>，但它似乎无法在Firefox 浏览器上正常工作。我正在使用 Tailwind CSS ^2.2，这里是 html 代码 sn-p:

<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。 您可以在不同的浏览器中打开它以查看差异。造成这种差异的原因是什么？您认为我可以进行哪些更改以使其在不同浏览器中保持一致？

【问题讨论】：

HTML 非常奇怪。为什么背景是通过空白span 标签完成的？只是为了圆角？您可以通过塑造具有文本的span 元素来创建圆形背景，那么您为什么要这样做？

这是个好问题。我笑着意识到 HTML 的结构是多么愚蠢。我是几个月前写的，所以我现在想不出为什么要这样组织它。我将其更新为您提到的简单方式。样式现在看起来不错。谢谢。

【参考方案1】：

虽然不确定确切原因，但这是由于“洛杉矶”中的额外前导空格。如果您将其更改为“洛杉矶”，则它可以正常工作。

<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