Perché il calcolo dell'altezza è così incoerente in Gecko e Blink quando si ha a che fare con elementi di blocco in linea?

Question

Come potete vedere di seguito, sia Gecko che Blink eseguono un calcolo di altezza incoerente per diversi elementi di blocco in linea, anche se hanno tutti la stessa classe css. Sembra ^{(* pause *)} Trident è l'unico motore di layout per farlo bene.

Ho dimenticato di (ri) impostare una proprietà?

Inoltre, come si può vedere in questa fiddle, se cambio l'imbottitura .3em-1em Blink rende come previsto. Tutti gli elementi hanno la stessa altezza. Gecko è ancora "rotto" però.

Qualcuno sa perché questo sta accadendo e come risolverlo?

---

<a> <button> <input> <span> 

---

Gecko (Firefox v 39.0.)

---

Blink (Google Chrome 43.0.2357.132 v m.):

0.123.516,410617 millions

---

Trident (Internet Explorer v 11.0.9600.17843.):

---

body { 
 
    font: normal 15px arial; 
 
    padding: 1em; 
 
} 
 

 
.button { 
 
    background: #444444; 
 
    border: none; 
 
    box-sizing: content-box; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-family: arial; 
 
    font-size: 1em; 
 
    height: auto; 
 
    line-height: normal; 
 
    margin: 0; 
 
    min-height: 1em; 
 
    padding: .3em; 
 
    text-decoration: none; 
 
}

<a class="button" href="#">button</a><button class="button">button</button><input class="button" type="button" value="button" /><span class="button">button</span>

Answer 1

Per Gecko (Firefox), è dovuto ai bordi dello ::moz-focus-inner per gli elementi del modulo. Se si nota, gli elementi del modulo (input e button) sono sempre ~ 2px più larghi e più alti di altri elementi.

per risolverlo, aggiungere sempre questo alla tua CSS (come parte del vostro reset): sono necessari

button::-moz-focus-inner{ 
    border:0; 
    padding:0; 
    margin-top:-2px; 
    margin-bottom:-2px; 
} 
input::-moz-focus-inner{ 
    border:0; 
    padding:0; 
    margin-top:-2px; 
    margin-bottom:-2px; 
} 

I margini negativi in ​​modo che i display dei caratteri "correttamente" nella line-height. Potrebbe essere necessario modificare i valori per adattarli all'altezza della linea, ma questi valori funzionano per lo più.

Per Blink (Chrome), gli elementi sono in realtà le stesse dimensioni, ma l'unico problema è che sono "disallineati". Si noterà che a volte gli elementi del modulo vengono visualizzati leggermente inferiori rispetto agli altri in un'impostazione inline-block. Per risolverlo, assicurati semplicemente che tutti usino lo stesso allineamento verticale, ad es.:

display: inline-block; 
vertical-align: top; 

E 'sempre una buona pratica per dichiarare le due proprietà sopra insieme - se si specifica inline-block, ricordate sempre di specificare l'allineamento verticale, al fine di evitare disallineamenti.