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

Posted

技术标签:

【中文标题】IE10和Chrome计算行内块元素高度的区别【英文标题】:Difference between IE10 and Chrome calculating heights of inline-block elements 【发布时间】:2013-05-08 10:25:43 【问题描述】:

我有一个稍微修改的 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 做同样的事情。

【问题讨论】:

float 强制元素向左或向右方向,display-block dnt 强制它使其仅内联而不强制元素的方向... 【参考方案1】:

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

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

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

【讨论】:

设置显示:table-cell;导致小插入符号(有关完整详细信息,请参见原始问题中的小提琴)显示在下一行。那篇文章似乎确实证实了我从其他人那里听到的关于此的内容。现在只是试着把我的头包起来!

以上是关于IE10和Chrome计算行内块元素高度的区别的主要内容,如果未能解决你的问题,请参考以下文章

行内元素与块元素的区别,及常用块元素和常用行内元素

display属性

前端基础知识

HTML/CS3相关面试题目

块元素与行内(内嵌)元素的区别

前端知识