为什么Bootstrap Glyphicons尺寸为24px，渲染为26px高度

Question

我在我的CSS中进行'像素移位'，经过一段时间的努力，我注意到我的问题的根本原因是“Glyphicons Halflings”字体包含在bootstrap中。我正在尝试渲染我的图标，如下面的

<style>
.size24 {
   font-size: 24px;
   background-color: red;
}
</style>
<span class="glyphicon glyphicon-trash size24" ></span>

但它实际上呈现为26px高度。是什么原因以及如何解决？这是字体中的错误吗？如何使我的图标准确地为24px * 24px？

这与bootstrap 3.0.2一起出现。

这是jsfiddle的案例http://jsfiddle.net/U8bLZ/2/和示例截图

扩大部分至3至5