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

Question

我有一个稍微修饰自举下拉截断按钮元素中的文本,但是,似乎是在按钮元素的高度是如何计算的差

这个小提琴演示了我最初做的事情.键似乎是控制按钮内的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的浏览器指标,用于按钮元素的高度:

用浮动代替跨度上的内联块样式:左边正如这个小提示所示,可以纠正高度并在两个浏览器中工作.

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？