IE10和Chrome计算行内块元素高度的区别

Question

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

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

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 的按钮元素高度指标：

用 float: left as demonstrated in this fiddle 替换 span 上的 inline-block 样式似乎可以更正高度并且适用于两种浏览器。

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;
}

在使用 inline-block 时，是什么导致 Chrome 和 IE 之间的元素高度不同，哪个做得正确？

更新：这里的 Firefox 似乎和 IE 做同样的事情。

Answer 1

我想你会在这个网址找到你的答案：

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

注意：您是否尝试过display:table-cell？