在低版本火狐中如何解决CSS table-cell宽度计算失真的问题？-css教程-PHP中文网

低版本 Firefox 中 table-cell 的 width 不生效，因其仅在完整表格上下文（table→table-row→table-cell）中尊重 width，单层使用或受 float 干扰时会降级为内容自适应。

在低版本火狐中如何解决css table-cell宽度计算失真的问题？

低版本 Firefox（如 78–91）中 display: table-cell 宽度失真，根本原因不是“不支持”，而是它对 box-sizing、padding 和 border 的组合解析比现代浏览器更严格——尤其当父容器未设明确宽度或存在浮动干扰时，table-cell 会退化为内容自适应行为，width 声明被静默忽略。

为什么 `width` 在 `table-cell` 上不生效

Firefox 旧版对 display: table-cell 的尺寸计算遵循较早的 CSS2.1 表格模型：它只在“表格上下文完整”时才尊重 width，而这个上下文要求父元素是 display: table-row（不能是 div 模拟），且该行必须有明确宽度来源（来自 table 元素本身或 colgroup）。直接给 div 设 display: table-cell 却没包在 table-row 里，width 就只是建议值。

常见错误现象：单独使用，宽度始终随内容伸缩
若父容器用了 float 或 position: absolute，table-cell 会彻底脱离表格布局流，width 失效



box-sizing: border-box 对 table-cell 无效（规范明确禁止），所以别指望它把 padding 算进 width

必须显式构建表格上下文，不能靠单个 table-cell

想让 width 被 Firefox 旧版识别，必须补全三层结构：table → table-row → table-cell。只写其中一层，浏览器就按“非完整表格”降级处理。

											
												
												
													CSS
													CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
												
												下载
												
											
										

最简可行结构：<div style="display: table; width: 100%;">
  <div style="display: table-row;">
    <div style="display: table-cell; width: 120px;">固定宽</div>
    <div style="display: table-cell; width: 200px;">另一列</div>
  </div>
</div>

不要用 float 包裹任何一层——float 和 table-cell 互斥，Firefox 会直接丢弃 width

避免在 table-cell 上设 min-width 或 max-width，旧版 Firefox 中它们会覆盖 width 并触发不可预测的回退

替代方案：用 inline-block + vertical-align 模拟
如果结构受限无法补全三层，或需兼容 IE8–9，改用 display: inline-block 更可靠。它在低版本 Firefox 中宽度控制稳定，且支持 box-sizing。

关键样式：.cell {
  display: inline-block;
  width: 120px;
  box-sizing: border-box;
  vertical-align: top;
  padding: 8px;
}

父容器必须设 font-size: 0 消除 inline-block 间隙，子元素再重设字体大小
注意：若内容含长单词或 URL，需加 word-break: break-all 防止撑破

低版本 Firefox 对表格语义的依赖比想象中深——它不会为你“猜”上下文。哪怕只是少了一层 table-row，width 就可能失效。与其反复调试 table-cell，不如确认是否真需要表格语义；若只是视觉对齐，inline-block 或 Flex（配合 flex-shrink: 0）反而更可控。