css - IE10 和 Chrome 计算内联 block 元素高度的区别

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 替换 span 上的内联 block 样式:left 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;
}

使用内联 block 时，是什么导致了 Chrome 和 IE 之间元素高度的差异？哪个是正确的？

更新:Firefox 似乎在此处执行与 IE 相同的操作。

Answer 1

我想你会在这个 URL 找到你的答案:

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

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