css - インラインブロック要素の高さを計算するIE10とChromeの違い

Question

ボタン要素内のテキストを切り捨てるように Bootstrap Dropdown を少し変更しましたが、ボタン要素の高さの計算方法に違いがあるようです。

このフィドルは、私が最初に行ったことを示しています。キーは、ボタン内のスパン要素を制御する 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 のブラウザー メトリックです。

スパンの inline-block スタイルを float: left に置き換えると、このフィドルで示されているように、高さが修正され、両方のブラウザーで機能するように見えます。

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

インラインブロックを使用しているときに Chrome と IE で要素の高さが異なる原因は何ですか?

更新: Firefox は、ここで IE と同じことを行うようです。