Altitud de procesamiento de forma diferente en Chrome y Firefox

Encontré que si establecimos un elemento de nivel de bloque con height:auto o height: 0~100% sin configurar el alto de padre con valor explícito, y su hijo de nivel de bloque tiene margen inferior, entonces calculará la altura de forma diferente en Chrome, pero no en Firefox. Para el caso que establece la height: 1% :

 html { background: pink; } body { background: yellow; } div { height: 1%; } inner { margin-bottom: 30px; margin-top: 20px; } 
 

block level element

La altura del bloque div se calculará como el margin-bottom + content height of p element . Estoy confundido acerca de por qué la height: 1% debe calcular en auto porque los elementos principales ( html y etiqueta del body ) no establecen su altura de forma explícita, pero tiene una altura diferente ya que simplemente establecemos la altura en auto .

Si lo configuramos directamente en height: auto , simplemente establecerá la altura como su altura de elemento de nivel de bloque secundario, que no incluye su margen inferior.

 html { background: pink; } body { background: yellow; } div { height: auto; } inner { margin-bottom: 30px; margin-top: 20px; } 
 

block level element

He leído las especificaciones de CSS 2.1 y pienso que mi pregunta podría estar cubierta con la propiedad de altura y el tema de colapso de margen, pero aún no puedo entender por qué se comporta diferente en Chrome ver. 47.0.2526, aunque Firefox ver. 44.0.2 mostrará la altura con el mismo valor.

Referencias enumeradas:
https://www.w3.org/TR/CSS2/visudet.html#the-height-property

  • 10.5: porcentaje

    … Si la altura del bloque contenedor no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está completamente posicionado, el valor se computa a ‘auto’. …

  • 10.6.3: Elementos no reemplazados a nivel de bloque en flujo normal cuando el overflow computa a visible .

    … si ‘altura’ es ‘automático’, la altura depende de si el elemento tiene hijos de nivel de bloque y si tiene relleno o bordes:

    La altura del elemento es la distancia desde su borde de contenido superior al primero aplicable de los siguientes:

    1. el borde inferior del último cuadro de línea, si el cuadro establece un contexto de formato en línea con una o más líneas
    2. el borde inferior del margen inferior (posiblemente colapsado) de su último hijo en flujo, si el margen inferior del niño no se colapsa con el margen inferior del elemento
    3. el borde del borde inferior del último niño en flujo cuyo margen superior no colapsa con el margen inferior del elemento
    4. cero, de lo contrario

https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#collapsing-margins

  • 8.3.1 márgenes colapsables.

    El margen superior de un elemento de bloque en flujo se colapsa con su primer margen superior del nivel de bloques en flujo si el elemento no tiene borde superior, no tiene relleno superior y el niño no tiene espacio libre.

    El margen inferior de un cuadro de bloques en flujo con una ‘altura’ de ‘auto’ y ‘min-height’ cero colapsa con su último margen inferior del nivel de bloques en flujo si el cuadro no tiene relleno de fondo y no el borde inferior y el margen inferior del niño no colapsan con un margen superior que tiene espacio libre.

    … Si los márgenes superior e inferior de una caja son contiguos, entonces es posible que los márgenes colapsen a través de ella. En este caso, la posición del elemento depende de su relación con los otros elementos cuyos márgenes se están contrayendo.

    • Si los márgenes del elemento están contraídos con el margen superior de sus padres, el borde del borde superior del cuadro se define como el mismo que el del padre.
    • De lo contrario, el padre del elemento no participa en el colapso del margen, o solo está involucrado el margen inferior del padre. La posición del borde del borde superior del elemento es la misma que si el elemento tuviera un borde inferior distinto de cero.

Entonces, primero tienes los estándares W3C, que son un conjunto de directrices para los fabricantes de navegadores.

Y luego tiene los fabricantes de navegadores, que son libres de hacer lo que quieran (como lo demuestra el historial de desviaciones de Internet Explorer).

En particular, con alturas porcentuales de CSS, existen claras diferencias de comportamiento entre los navegadores.

Has publicado un ejemplo. Aquí está otro:

Porcentaje de Alturas en Flexbox: Chrome / Safari vs Firefox / IE

Al trabajar con flexbox, Chrome y Safari resuelven porcentajes porcentuales en artículos flexibles en función del valor de la propiedad de height . Firefox e IE11 / Edge priorizan la altura de flexión del padre.

Parece que los navegadores Webkit se adhieren a una interpretación más tradicional de la especificación:

Propiedad de height CSS

porcentaje
Especifica una altura de porcentaje. El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada. Si la altura del bloque que lo contiene no se especifica explícitamente y este elemento no está completamente posicionado, el valor se calcula como “automático”.

auto
La altura depende de los valores de otras propiedades.

En otras palabras, para que la altura porcentual funcione en un hijo en flujo, el padre debe tener una altura establecida.

Esa es la interpretación tradicional de la especificación: el término “altura” significa el valor de la propiedad de height . Mi propia opinión es que este lenguaje es vago y abierto a la interpretación, pero el requisito de propiedad de height ha convertido en la implementación predominante. Nunca he visto trabajo min-height o min-height max-height en un padre cuando se trata de valores porcentuales.

Recientemente, sin embargo, Firefox e IE también han ampliado su interpretación para aceptar alturas de flexión.

Ejemplos de Firefox e IE utilizando la altura flexible de un padre como referencia para la altura porcentual de un niño:

  • Chrome ignora la base flexible en el diseño de columnas
  • Chrome / Safari no se completa al 100% de la altura del elemento flexible
  • La altura no es correcta en los artículos de Flexbox en Chrome
  • Flexbox en Chrome: cómo limitar el tamaño de los elementos nesteds?

Saber qué navegadores cumplen con la especificación es un poco difícil porque, como mencioné anteriormente, el lenguaje de la especificación parece vago y abierto a la interpretación.

Con la última actualización de esta parte de la definición en 1998 ( CSS2 ) y el advenimiento de nuevas formas de altura, como la altura flexible, una actualización parece haberse retrasado.

Creo que es justo decir que cuando se trata de alturas porcentuales, hasta que la definición de la especificación obtenga una actualización, puede esperar diferencias de representación entre los navegadores.


Soluciones alternativas

Aquí hay dos alternativas para considerar cuando se quiere que un elemento hijo tome la altura total de los padres.

  1. Aplicar display: flex al padre. Esto establece automáticamente align-items: stretch , que le indica al niño que expanda la altura completa disponible del elemento primario.

  2. Aplicar position: relative en el padre y position: absolute; height: 100%; width: 100% position: absolute; height: 100%; width: 100% position: absolute; height: 100%; width: 100% en el niño. Con el posicionamiento absoluto, una altura porcentual funcionará sin una altura especificada en el elemento principal.