Las alturas se representan de manera diferente en Chrome y Firefox [duplicado]

Descubrí que si configuramos un elemento a nivel de bloque con height:autoo height: 0~100%sin configurar la altura del padre con un valor explícito, y su hijo a nivel de bloque tiene un margen inferior, entonces calculará la altura de manera diferente en Chrome, pero no en Firefox. Para el caso que establece height: 1%:

http://codepen.io/anon/pen/BjgKMR

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: 1%;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

<div>
  <p class="inner">block level element</p>
</div>

La altura del divbloque se calculará como margin-bottom + content height of p element. Estoy confundido acerca de por qué height: 1%debería calcularse autoporque los elementos principales ( htmly bodyla etiqueta) no establecen su altura explícitamente, sino que tienen una altura diferente, ya que simplemente configuramos la altura directamenteauto .

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

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: auto;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

<div><p class="inner">block level element</p></div>

He leído la especificación CSS 2.1 y pienso que mi pregunta podría estar cubierta con el tema de propiedad de altura y colapso de margen, pero todavía no puedo entender por qué se comporta de manera diferente en la versión de Chrome. 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á en una posición absoluta, el valor se calcula como 'automático'. ...

• 10.6.3: Elementos no reemplazados a nivel de bloque en flujo normal cuando overflowse calcula en visible.

  ... si 'altura' es 'automática', la altura depende de si el elemento tiene hijos a nivel de bloque y si tiene relleno o bordes:

  La altura del elemento es la distancia desde el borde superior del contenido hasta el primero aplicable de lo siguiente:

  1. el borde inferior del cuadro de la última 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 de flujo entrante, si el margen inferior del hijo no colapsa con el margen inferior del elemento
  3. el borde inferior del último elemento secundario 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 colapso de márgenes.

  El margen superior de un elemento de bloque de flujo entrante se colapsa con el margen superior de su primer elemento secundario a nivel de bloque de flujo entrante si el elemento no tiene borde superior ni relleno superior y el elemento secundario no tiene espacio libre.

  El margen inferior de un cuadro de bloque de flujo de entrada con una 'altura' de 'auto' y una 'altura mínima' de cero colapsa con el margen inferior del último bloque de flujo de entrada secundario si el cuadro no tiene relleno inferior ni borde inferior y el margen inferior del niño no colapsa con un margen superior que tiene espacio libre.

  ... Si los márgenes superior e inferior de un cuadro están contiguos, es posible que los márgenes colapsen a través de él. En este caso, la posición del elemento depende de su relación con los demás elementos cuyos márgenes se están colapsando.

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

Feb 21 '16 13:02 James Yang