Difference between IE10 and Chrome calculating heights of inline-block elements

Question

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

This fiddle demonstrates what I did initially The key seems to be the CSS controlling the span element within the button.

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 the height of the button element:

Replacing the inline-block style on the span with a float: left as demonstrated in this fiddle appears to correct the heights and works across 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 is causing the difference in element height between Chrome and IE when using inline-block and which is doing it correctly?

Update: Firefox appears to do the same thing as IE here.

Answer 1

I think that you'll find your answers at this URL:

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

Note: did you gave a try to display:table-cell?