Il riempimento percentuale si comporta in modo imprevisto in Firefox

Question

Sto riscontrando un comportamento strano in Firefox ( v35 v39 v52) relativo al riempimento percentuale. Non riesco a riprodurre questo problema in Chrome.

Ho un elemento con piano padding impostato in percentuale, come questo:

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

Percentuale padding su un elemento è relative to its parent's width. Quindi, mi aspetto che il padding nella parte superiore dell'elemento aumenti man mano che la larghezza della finestra viene ingrandita. Questo è davvero il risultato del mio semplice tag <p>.

Tuttavia, quando l'elemento è flottato o ha larghezza, la percentuale di riempimento non si comporta come previsto quando la finestra viene ridimensionata. L'imbottitura è calcolata correttamente al caricamento. Tuttavia, man mano che la finestra viene ridimensionata, l'altezza totale degli elementi flottati o con larghezza sembra essere la stessa. Il testo nell'elemento è inspiegabilmente collocato nella parte inferiore di un'area che diventa misteriosa altezza. Questo succede per elementi come questo:

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; 
} 

Ecco un'immagine per illustrare quello che sto vedendo. Firebug aggiunge la codifica dei colori; il viola è il riempimento, il giallo il margine e il blu il contenuto dell'elemento.

Quali sono le cause questa incoerenza? Qualcun altro può riprodurre questo problema in Firefox (o in qualsiasi altro browser)?

---

Ecco uno fiddle to demonstrate. In Firefox, prova ad espandere o contrarre il riquadro dei risultati per vedere il ridimensionamento degli elementi.

Non ho aggiunto uno snippet di codice eseguibile, in quanto non sono riuscito a trovare un modo semplice per ridimensionare l'area di frammento al volo.

Ho aggiunto uno snippet di stack per dimostrare il problema. Usa il pulsante "Pagina intera" in modo da poter allungare la larghezza della finestra.

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

Questo è strano. Non sono sicuro che sia un bug. Ma, cambiando il display in flex sembra che risolva il 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

è possibile utilizzare un elemento pseudo per evitare il bug e chiaro quelli altezza della larghezza s '10% lo si desidera.

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>