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之間的區別計算行內塊元素的高度

回答

相關問題