空 display: inline 元素在 Chrome 和 Firefox 中计算出的高度不一致（如 getBoundingClientRect().height 返回 0 或非 0），源于浏览器对 CSS 行盒（line box）生成及匿名文本节点处理的细微差异，并非 bug，而是对规范不同阶段实现的合理分歧；可通过重置 font-size、line-height 或强制 vertical-align 等方式统一行为。
空 `display: inline` 元素在 chrome 和 firefox 中计算出的高度不一致（如 `getboundingclientrect().height` 返回 0 或非 0），源于浏览器对 css 行盒（line box）生成及匿名文本节点处理的细微差异，并非 bug，而是对规范不同阶段实现的合理分歧；可通过重置 `font-size`、`line-height` 或强制 `vertical-align` 等方式统一行为。
在 CSS 渲染中，一个空的 inline 元素（如 <bar></bar>）本身不生成内容框，但它仍会参与行盒（line box）的构建。关键在于：浏览器是否为该元素所在行生成包含“基线对齐上下文”的匿名文本节点。
- Chrome（Blink）：倾向于忽略纯空 inline 元素周围仅由换行/缩进产生的空白字符（U+000A、U+0020 等），不为其创建有效的行盒内容，因此 getBoundingClientRect().height 常返回 0；
- Firefox（Gecko）：更严格地将源码中的换行与缩进视作可渲染的空白（尤其当父容器未设置 white-space: pre 以外的值时），可能生成极小但非零高度的行盒，导致 height > 0（通常为 1px 或 font-size * line-height 的最小可渲染值）。
这并非违反规范，而是对 CSS Inline Layout 中“anonymous inline boxes”和“line box height calculation”条款的不同实现侧重——W3C 规范允许浏览器在处理“无内容但影响行布局的 inline 元素”时保留一定自由度。
✅ 推荐兼容性解决方案
以下方法均可有效消除跨浏览器差异，按推荐优先级排序：
1. 移除隐式空白影响（最稳妥）
foo {
font-size: 0; /* 消除匿名文本节点的基础字号 */
}
foo > bar {
font-size: 16px; /* 恢复子元素字体（如需） */
display: inline;
}2. 控制行高与对齐
bar {
display: inline;
line-height: 0; /* 阻止行盒因 line-height 膨胀 */
vertical-align: top; /* 明确对齐方式，避免基线浮动干扰 */
}3. 强制脱离行内流（适用场景有限）
bar {
display: inline-block; /* 或 inline-flex / inline-grid */
width: 0; height: 0;
overflow: hidden;
}⚠️ 注意：避免依赖 visibility: hidden 或 opacity: 0，它们不改变几何尺寸；也勿用 font-size: 0 于全局容器（影响可访问性），应精准作用于布局上下文。
总结
该现象本质是浏览器引擎对“空 inline 元素是否触发行盒渲染”的策略差异，属于符合规范的实现多样性。实践中，不应对空 inline 元素的高度做跨浏览器假设；若需精确控制尺寸，应显式定义其显示模型（如 inline-block）、抑制行盒影响（font-size: 0 / line-height: 0），或改用语义更明确的布局方式（如 Flex/Grid 容器）。始终通过 getBoundingClientRect() + 实际渲染验证，而非仅依赖理论推导。
