Chrome与Firefox中空display:inline元素高度差异：原因及解决方法咨询

这是Bug还是规范解读差异？ #

这并非浏览器Bug，而是两款浏览器对CSS规范的不同解读导致的差异。

CSS规范对于display: inline的空元素布局高度的定义存在模糊区域：

• Chrome判定空内联元素无内容，因此getBoundingClientRect().height返回0；
• Firefox则将这类元素的高度等同于当前字体环境下空白字符的高度（即基线到顶线的距离），所以返回非0值。

常规解决方法 #

• 强制统一尺寸：给目标内联元素显式设置height和line-height为0，强制浏览器返回一致的高度值：

  bar {
    display: inline;
    height: 0;
    line-height: 0;
  }
  

• 切换元素显示类型：如果业务场景允许，将display改为inline-block或block，这类元素的尺寸计算规则在浏览器中更统一，空元素的高度会被解析为0：

  bar {
    display: inline-block;
  }
  

• 添加占位内容：给空元素添加不可见的空白占位符（如 ），但此方法会改变元素内容结构，仅适合特定场景：

  <bar>&nbsp;</bar>
  

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