Differenza tra IE10 e Chrome Calcolo dell'altezza degli elementi del blocco in linea

Question

Ho un dropdown Bootstrap leggermente modificato per troncare il testo all'interno dell'elemento del pulsante, tuttavia, sembra esserci una differenza nel modo in cui viene calcolata l'altezza dell'elemento del pulsante.

This fiddle demonstrates what I did initially La chiave sembra essere il CSS che controlla l'elemento span all'interno del pulsante.

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

seguito sono elencate le metriche del browser per IE e Chrome per l'altezza dell'elemento tasto:

Sostituzione lo stile inline-block sul arco con un float: left as demonstrated in this fiddle sembra correggere le altezze e funziona su entrambi i browser.

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

Qual è la causa del dislivello elemento tra Chrome e IE quando si utilizza inline-block, e che lo sta facendo in modo corretto?

Aggiornamento: Firefox sembra fare la stessa cosa di IE qui.

Answer 1

Penso che troverete le risposte a questo URL:

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

Nota: avete dato una prova per display:table-cell?