Firefox忽略浮动伪元素line-height的解决方案求助

你遇到的这个Firefox的老bug确实挺闹心的，尤其是在不能修改HTML结构的情况下。不过有个符合你所有限制条件的解决方案：

用同色边框模拟垂直高度 #

我们可以放弃用line-height控制首字母的垂直高度，转而使用上下边框来实现相同的视觉效果，这样就能避开Firefox的line-height计算异常问题。修改后的CSS代码如下：

p { 
  font-family: sans-serif; 
  line-height: 3rem; 
  font-size: 2.4rem; 
}
p:first-letter { 
  float: left; 
  background-color: black; 
  color: white; 
  line-height: 4.8rem; /* 设为与字体大小一致，消除行高干扰 */
  font-size: 4.8rem; 
  padding: 0 1rem; 
  margin-right: 0.5rem;
  /* 上下边框总和 + 字体大小 = 原本想要的6rem行高 */
  border-top: 0.6rem solid black;
  border-bottom: 0.6rem solid black;
  box-sizing: border-box; /* 确保边框不会额外增加元素宽度 */
}

为什么这个方法有效 #

• Firefox对浮动状态下的:first-letter伪元素的line-height属性存在解析bug，而边框的高度计算在所有浏览器中都是一致的，不会出现折叠或忽略的问题。
• 我们设置边框颜色和首字母的背景色完全相同，视觉上不会有任何突兀感，刚好模拟出line-height: 6rem的垂直高度（4.8rem字体大小 + 0.6rem上下边框 = 6rem）。
• box-sizing: border-box保证左右内边距和边框不会改变元素的总宽度，避免破坏原有布局。

你提到的那些无效方案我也都试过：设置display属性、height/min-height，还有initial-letter确实支持度不够，都没法解决这个问题。

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