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

Question

一个inline-block span元素，line-height为20.16px（14.4pt font-size * 1.4 line-height），height 19px < / strong>在Chrome上。

一个inline-block span元素，line-height为20.16px（20.16px line-height），Chrome上的height 20px 。< / p>

元素检查器为两个元素提供相同的line-height，但明确设置line-height会更改元素的高度。试着小提琴看看发生了什么：

＆＃13;

＆＃13;

span {
  font-size: 14.4px;
  line-height: 1.4;
  /* line-height = 20.16px; 14.4 * 1.4 */
  display: inline-block;
}

span.explicit {
  line-height: 20.16px;
}

＆＃13;

<span>line-height of 20.16px has a height of 19px!!</span>
<br />
<span class="explicit">line-height of 20.16px has a height of 20px</span>
<br />
<br />
<strong>Use inspect element to examine the two span's differing height</strong>

＆＃13;

＆＃13;

＆＃13;

问题是：为什么会发生这种情况？

Answer 1

使用14.4px与使用14px

完全相同

所以14px x 1.4 = 19.6px

我在FF和Chrome中都进行了测试，在Firefox中，它们最终为20px，但出于某种原因，Chrome会忽略小数并保持19px

参见相关的SO Question

span {
  font-size: 14px;
  line-height: 1.4;
  /* line-height = 19.6px; 14 * 1.4 */
  display: inline-block;
}

span.explicit {
  line-height: 19.6px;
}

<span>line-height of 19.6px has a height of 19px!!</span>
<br />
<span class="explicit">line-height of 19.6px has a height of 20px</span>
<br />
<br />
<strong>Use inspect element to examine the two span's differing height</strong>

Firefox ScreenShots：