IE10和Chrome之间的差异计算内联块元素的高度

Question

我稍微修改了Bootstrap Dropdown来截断button元素中的文本，但是，按钮元素的高度计算方式似乎有所不同。

This fiddle demonstrates what I did initially关键似乎是CSS控制按钮中的span元素。

button.btn span {
    min-width:91px;
    max-width:91px;
    overflow:hidden;
    white-space:nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display:inline-block;
}

以下是IE和chrome的浏览器指标，用于按钮元素的高度：

使用浮点替换跨度上的内联块样式：左as demonstrated in this fiddle似乎可以纠正高度并在两个浏览器中都有效。

button.btn span {
    min-width:91px;
    max-width:91px;
    overflow:hidden;
    white-space:nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    float: left;
}

使用内联块时，Chrome和IE之间元素高度的差异是什么导致正确执行？

更新：Firefox似乎与IE做同样的事情。

Answer 1

我认为您可以通过以下网址找到答案：

http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

注意：你试过display:table-cell吗？