CSS: ¿Por qué vertical-align: línea base deja de funcionar en Firefox cuando se usa el desbordamiento: oculto?

Question

Puede reproducir esto ejecutando este test case. Los resultados se muestran en la captura de pantalla a continuación. El problema es que en Firefox, al agregar un overflow: hidden en el "bloque" (con fondo gris en la captura de pantalla), el bloque deja de estar alineado como me gustaría: en lugar de que la línea base del texto en el bloque sea alinearse con la línea base del cuadro principal, es como si la parte inferior del bloque estuviera alineada en la línea base del cuadro principal. Como puede ver en la captura de pantalla, esto no ocurre con Chrome.

1. ¿Esto es un error de Firefox?
2. ¿Cómo obtener el resultado esperado en Firefox (alineación de línea base con overflow: hidden)?

Nota: El uso vertical-align: middle en "bloque" no es suficiente, ya que lo que realmente quiero es la alineación de la línea de base. Se puede ver más claramente que vertical-align: middle no hace la alineación de la línea de base mediante el establecimiento de padding: 1em 0 .1em 0 (más relleno en la parte superior de la caja), que le dan:

Answer 1

intento de añadir vertical-align: text-bottom; a .block

se también puede tratar de establecer la igualdad de Hoja de alturas para .label y .block

Answer 2

tratar

 
.label { 
     float: left; 
     line-height: 30px; 
     margin-right: 5px; 
     } 

esto obtendrá el resultado deseado tanto en FF como en Chrome/Safari. No hizo la prueba en IE sin embargo.

Answer 3

Parece desbordamiento: oculto tiene errores, ya que elimina la línea de base de un elemento de bloque en línea. Afortunadamente, hay un valor de extensión de Mozilla CSS aparentemente redundante para el desbordamiento que evita el desbordamiento pero no muestra este comportamiento erróneo.

Prueba esto:

.block { 
    width: 10em; padding: .3em 0 .1em 0; 
    overflow: hidden; 
    overflow: -moz-hidden-unscrollable; 
    white-space: nowrap; 
    display: inline-block; 
    border: 1px solid #666; background-color: #eee;  
} 

Parece que corrige el problema en Firefox y no perder el tiempo con Safari.

Actualización:

Parece que Firefox y Opera están prestando overflow: hidden bloques línea correcta y navegadores Webkit no lo son.

Según la W3C CSS2 Working Draft's Visual Formatting Model Details,

La línea de base de un 'inline-block' es la línea de base de la caja última línea en el flujo normal, a menos que tenga ya sea no en-flujo de la línea cajas o si su propiedad 'overflow' tiene un valor calculado que no sea 'visible', en el cual caso la línea de base es el borde inferior edge.