Difference between IE10 and Chrome calculates inline block element heights

Question

I have a slightly modified Dropstrap Dropdown to crop text inside a button element, however there seems to be a difference in how the height of the button element is calculated.

This script demonstrates what I did initially . The key seems to be a span control inside the button. 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; } 

Below are the browser metrics for IE and chrome for button element height:

Replacing the inline-block style on the span with float: left as shown in this script corrects the heights and works through both browsers.

 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; } 

What causes the height difference between the elements between Chrome and IE when using the inline block and which does it right?

Update: Firefox seems to be doing the exact same thing as IE here.

Answer 1

I think you will find the answers to this URL:

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

Note: have you tried display:table-cell ?