低版本 Firefox 中 table-cell 的 width 不生效，因其仅在完整表格上下文（table→table-row→table-cell）中尊重 width，单层使用或受 float 干扰时会降级为内容自适应。
低版本 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 就只是建议值。
- 常见错误现象：
<div class="cell" style="display: table-cell; width: 120px;"> 单独使用，宽度始终随内容伸缩 <li>若父容器用了 <code>float或position: absolute，table-cell会彻底脱离表格布局流，width失效 -
box-sizing: border-box对table-cell无效（规范明确禁止），所以别指望它把padding算进width - 最简可行结构：
<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并触发不可预测的回退 - 关键样式：
.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防止撑破
必须显式构建表格上下文，不能靠单个 table-cell
想让 width 被 Firefox 旧版识别，必须补全三层结构：table → table-row → table-cell。只写其中一层，浏览器就按“非完整表格”降级处理。
替代方案：用 inline-block + vertical-align 模拟
如果结构受限无法补全三层，或需兼容 IE8–9，改用 display: inline-block 更可靠。它在低版本 Firefox 中宽度控制稳定，且支持 box-sizing。
立即学习“前端免费学习笔记（深入）”；
低版本 Firefox 对表格语义的依赖比想象中深——它不会为你“猜”上下文。哪怕只是少了一层 table-row，width 就可能失效。与其反复调试 table-cell，不如确认是否真需要表格语义；若只是视觉对齐，inline-block 或 Flex（配合 flex-shrink: 0）反而更可控。
