css - que - style line height html

El relleno de porcentaje se comporta de forma inesperada en Firefox

Question

Estoy experimentando un comportamiento extraño en Firefox ( v35 v39 v52) con respecto al porcentaje de relleno. No puedo reproducir este problema en Chrome.

Tengo un elemento con un conjunto de relleno superior como un porcentaje, como este:

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
}

El porcentaje de relleno en un elemento es relativo al ancho de su padre . Por lo tanto, espero que el relleno en la parte superior del elemento crezca a medida que se amplía el ancho de la ventana. Este es de hecho el resultado de mi simple etiqueta <p> .

Sin embargo, cuando ese elemento está flotante o tiene ancho, el relleno porcentual no se comporta como se esperaba cuando se cambia el tamaño de la ventana. El relleno se calcula correctamente con la carga. Pero, a medida que se cambia el tamaño de la ventana, la altura total de los elementos que flotan o tienen ancho parece ser la misma. El texto en el elemento se coloca inexplicablemente en la parte inferior de un área que adquiere una altura misteriosa. Esto sucede para elementos como este:

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
    float:left;
}

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
    width:150px;
}

Aquí hay una imagen para ilustrar lo que estoy viendo. La codificación de color es agregada por Firebug; el morado es el relleno, el amarillo es el margen, y el azul es el contenido del elemento.

¿Qué causa esta inconsistencia? ¿Alguien más puede reproducir este problema en Firefox (o en cualquier otro navegador)?

Aquí hay un violín para demostrar . En Firefox, intente expandir o contraer el panel de resultados para ver el tamaño de los elementos.

No agregué un fragmento de código ejecutable, ya que no pude encontrar una manera fácil de cambiar el tamaño del área del fragmento sobre la marcha.

Agregué un fragmento de pila para demostrar el problema. Use el botón "Página completa" para que pueda estirar el ancho de la ventana.

html,body {
  margin: 0;
}
div#container {
  width: 100%;
}
p {
  padding: 10% 0 0;
  margin: 0 0 1em;
  background-color: #CCC;
}
p.width_limited {
  width: 150px;
}
p.floated {
  float: left;
}

<div id="container">
  <p>NORMAL</p>
  <p class="floated">FLOATED</p>
  <div style="clear:both;height:0;"></div>
  <p class="width_limited">HAS WIDTH</p>
</div>

Answer 1

Eso es extraño. No estoy seguro de si es un error. Pero al cambiar la pantalla a flexión parece que se solucionó el problema. http://jsfiddle.net/vsvp71rw/4/

p {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
}

Answer 2

puede usar un pseudo elemento para evitar el error y borrar la altura del ancho del 10% que desee.

html,
body {
  margin: 0;
}

div#container {
  width: 100%;
}

p {
  margin: 0 0 1em;
  background-color: #CCC;
}

p:before {
  content: '''';
  padding: 5% 0;
  display: block;
}

p.width_limited {
  width: 150px;
}

p.floated {
  float: left;

<div id="container">
    <p>NORMAL</p>
    <p class="floated">FLOATED</p>
    <div style="clear:both;height:0;"></div>
    <p class="width_limited">HAS WIDTH</p>
</div>