Tailwind CSS中justify-self-end在Firefox不生效的解决方法

关联代码 #

<section class="lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:h-screen overflow-hidden">
  <div class="justify-self-end bg-[#2e3362] px-[1em] lg:px-[0] mb-[1.875em] lg:mb-0">
    <img
      src="../img/alarm.webp"
      class="alarm cursor-pointer shadow-lg rounded-[1em] lg:rounded-l-full max-w-full h-[90%]"
    />
  </div>
  <div class="bg-[#2e3362] px-[1em] lg:px-[0] mb-[1.875em] lg:mb-0">
    <img
      src="../img/camera.webp"
      class="camera cursor-pointer shadow-lg rounded-[1em] lg:rounded-r-full max-w-full h-[90%]"
    />
  </div>
</section>

浏览器表现差异 #

• Firefox运行效果
  
• Chrome运行效果
  

差异根源 #

两款浏览器对未设置明确宽度的Grid子项的尺寸计算逻辑不一致：

• Chrome默认将这类子项收缩为内容固有宽度，justify-self-end会将收缩后的元素对齐到网格单元格右侧，符合预期
• Firefox默认让这类子项拉伸占满整个网格单元格宽度，元素本身已经撑满单元格空间，justify-self-end的对齐效果无法呈现，和预期不符

修复方案 #

• 最小成本修复：给应用了justify-self-end的子元素新增w-fit工具类，强制元素宽度始终贴合内容，不受浏览器默认拉伸逻辑影响。修改后对应元素代码：

  <div class="justify-self-end w-fit bg-[#2e3362] px-[1em] lg:px-[0] mb-[1.875em] lg:mb-0">
  

  该方案完全保留原有Grid布局逻辑，仅新增1个类即可实现双浏览器表现一致，w-fit对应的width: fit-content属性在两款浏览器的现代版本中均全量支持。
• 无兼容风险修复：将lg断点下的Grid布局替换为Flex布局，父容器类修改为lg:flex lg:items-center lg:h-screen overflow-hidden，第一个子元素新增lg:ml-auto类，通过Flex布局下margin: auto自动填充剩余空间的特性实现右对齐，该方案适配所有支持Flex的浏览器版本，无布局逻辑差异。
• 扩展型修复：保留Grid布局的前提下调整网格列规则，将父容器的lg:grid-cols-2替换为lg:grid-cols-[1fr_auto_auto_1fr]，两个子元素分别放置在第2、第3个网格轨道，移除justify-self-end，通过两侧的弹性轨道实现两个元素居中拼接，适合后续需要在页面左右两侧新增其他内容的场景。

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