Tailwind布局在Chrome与Firefox中显示不一致的原因咨询

原始代码 #

<template>
  <div class="flex justify-center items-center h-screen">
    <div class="grid grid-cols-2 w-64 space-x-1 bg-black p-2 rounded-xl">
      <div class="relative z-0 bg-black">
        <div class="relative z-20 grid-rows-3">
          <div class="relative z-10 bg-white h-20 rounded-xl"></div>
          <div class="relative z-10 bg-black h-1"></div>
          <div class="relative z-10 bg-white h-20 rounded-xl"></div>
          <div class="absolute z-20 bottom-1/2 translate-y-1/2 right-1/2 translate-x-1/2 text-[200px]">3</div>
        </div>
      </div>
      <div class="relative z-0 bg-black">
        <div class="relative z-20 grid-rows-3">
          <div class="relative z-10 bg-white h-20 rounded-xl"></div>
          <div class="relative z-10 bg-black h-1"></div>
          <div class="relative z-10 bg-white h-20 rounded-xl"></div>
          <div class="absolute z-20 bottom-1/2 translate-y-1/2 right-1/2 translate-x-1/2 text-[200px]">6</div>
        </div>
      </div>
    </div>
  </div>
</template>

显示差异说明 #

Chrome中能正确渲染出上下两个白色圆角块、中间带黑色间隔的布局，数字居中；但Firefox里上下白色块重叠，中间的黑色间隔消失，数字位置也错位。

原因分析 #

问题出在grid-rows-3类的使用上：

• Tailwind的grid-rows-3对应CSS为grid-template-rows: repeat(3, minmax(0, 1fr))，这个属性只有当元素被设置为网格容器（即display: grid）时才会生效。
• Chrome有兼容性兜底，会自动给应用了grid-template-rows的元素加上display: grid，所以能正确解析3行网格布局。
• Firefox严格遵循CSS规范，没有display: grid的情况下，grid-template-rows会被忽略，内部元素都是普通块级元素，中间的h-1黑色div会被上下两个h-20的白色块挤压，视觉上消失；同时绝对定位的数字因为父元素高度未按网格计算，导致居中位置错误。

修复方案 #

给包含grid-rows-3的div加上grid类（开启网格布局），修改后的关键代码如下：

<!-- 给每个含grid-rows-3的div添加grid类 -->
<div class="relative z-20 grid grid-rows-3">

修复后的完整代码：

<template>
  <div class="flex justify-center items-center h-screen">
    <div class="grid grid-cols-2 w-64 space-x-1 bg-black p-2 rounded-xl">
      <div class="relative z-0 bg-black">
        <div class="relative z-20 grid grid-rows-3">
          <div class="relative z-10 bg-white h-20 rounded-xl"></div>
          <div class="relative z-10 bg-black h-1"></div>
          <div class="relative z-10 bg-white h-20 rounded-xl"></div>
          <div class="absolute z-20 bottom-1/2 translate-y-1/2 right-1/2 translate-x-1/2 text-[200px]">3</div>
        </div>
      </div>
      <div class="relative z-0 bg-black">
        <div class="relative z-20 grid grid-rows-3">
          <div class="relative z-10 bg-white h-20 rounded-xl"></div>
          <div class="relative z-10 bg-black h-1"></div>
          <div class="relative z-10 bg-white h-20 rounded-xl"></div>
          <div class="absolute z-20 bottom-1/2 translate-y-1/2 right-1/2 translate-x-1/2 text-[200px]">6</div>
        </div>
      </div>
    </div>
  </div>
</template>

修改后，Chrome和Firefox就能保持一致的显示效果。

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