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

我有一个稍微修改的Bootstrap下拉列表来截断按钮元素内的文本，但是，在计算按钮元素的高度方面似乎存在差异。IE10和Chrome之间的区别计算行内块元素的高度

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浏览器度量和铬为按钮元件的高度：

IE inline-block metrics Chrome inline-block metrics

与浮子跨度更换直列块样式：左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; 
}

IE float: left metrics

什么是使用内联块并且被正确地这样做时引起Chrome和IE之间元件的高度差？

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

来源

2013-05-14 DJG

float将元素向左或向右的方向移动，display-block dnt强制它仅在内联时不强制元素的方向... – SaurabhLP 2013-05-14 09:54:49

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

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

注意：你给了一个尝试display:table-cell？

来源

2013-05-23 16:02:25 Cholesterol

设置display：table-cell;导致小插入（请参阅原始问题中的小提琴以获取全部细节）以显示在下一行上。这篇文章似乎证实了我从其他人那里听到的有关这方面的内容。现在只是尝试和我的头围绕它！ – DJG 2013-05-24 14:32:59

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

回答

相关问题