Css 为什么将行高度设置为20.16px（从20.16px）会改变其高度？

内联块

跨度元素的

行高

为20.16px（14.4pt

字体大小

*1.4

行高

），在Chrome上的

高度

为19px

内联块

跨度元素的

行高

为20.16px（20.16px

行高

），在Chrome上的

高度

为20px

元素检查器为两个元素提供相同的

行高度

，但明确设置

行高度

会更改元素的高度。试着拉小提琴看看发生了什么：

span{
字体大小：14.4px；
线高：1.4；
/*线高=20.16px；14.4*1.4*/
显示：内联块；
}
span.explicit{
线高：20.16px；
}

20.16px的行高等于19px！！


线高度为20.16px时，线高度为20px




使用检查元件检查两个跨度的不同高度

使用

14.4px

与使用

14px

因此

14px

x

1.4

=

19.6px

我在FF和Chrome中都进行了测试，在Firefox中，它们取整为

20px

，但Chrome出于某种原因只是忽略了小数点，而使用

19px

见相关

span{
字体大小：14px；
线高：1.4；
/*线高=19.6px；14*1.4*/
显示：内联块；
}
span.explicit{
线高：19.6px；
}

19.6px的行高等于19px！！


线高度为19.6px，线高度为20px




使用inspect元素检查两个跨度的不同高度

技术上，Firefox也向下取整

14px

x

1.4

，但向上取整

19.6px

。您可以看到问题的示例：在Firefox和Chrome中，这两个元素都是

19px

。此外，在Inspect元素中，它显示为

20.16px

。所以这似乎是Inspect元素和浏览器的实际DOM指标之间的差异。请参阅Firefox屏幕截图的更新答案，两个输出均为

height:20px