为何使用Tailwind CSS编写的HTML在Chrome与Firefox中显示效果不同？

• 这一问题本质是不同浏览器对行内（inline）元素作为绝对定位包含块的规则实现不同。默认<span>为行内元素，当你给行内元素设置relative定位作为父容器时，Chrome可以正确识别行内元素的整体边界作为子元素absolute定位的参考范围，但Firefox无法为前后带空格的行内元素正确计算有效定位边界，导致内部绝对定位的背景元素没有正常宽高，无法渲染。

有两种可行的修复方式，都可以兼容所有主流浏览器：

方案1：调整父span的显示类型（推荐，无需改动现有结构） #

给所有设置了relative的子span加上inline-block类，inline-block元素的尺寸计算规则在所有浏览器中完全统一，可作为绝对定位元素的稳定包含块。
修改后的代码示例：

<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 inline-block 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 inline-block 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>

方案2：简化实现逻辑（更简洁，无定位兼容问题） #

不需要用嵌套绝对定位的方式做文字高亮，直接给外层span设置背景色、padding和圆角即可，代码更精简，不存在跨浏览器兼容问题：

<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="px-1.5 rounded-sm bg-blue-50">Spanish</span>
  immersion school of
  <span class="px-1.5 rounded-sm bg-red-100">Los Angeles</span>
</h1>

可根据视觉需求调整padding数值，匹配原设计效果。

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