6

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

这个小提琴演示了我最初所做的关键似乎是控制按钮内 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 浏览器指标:

IE 内联块指标 Chrome 内联块指标

用 float: left 替换 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;
}

IE 浮动:左侧指标

使用 inline-block 时导致 Chrome 和 IE 之间元素高度差异的原因是什么?

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

4

1 回答 1

2

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

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

注意:您尝试过display:table-cell吗?

于 2013-05-23T16:02:25.780 回答