Prozentuale Padding verhält sich unerwartet in Firefox

Question

Ich habe seltsames Verhalten in Firefox ( v35 v39 v52) in Bezug auf prozentuale Polsterung. Ich kann dieses Problem in Chrome nicht reproduzieren.

Ich habe ein Element mit Top-padding als Prozentsatz festgelegt, wie folgt aus:

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

Percentage Polsterung an einem Element ist relative to its parent's width. Ich erwarte also, dass die Füllung am oberen Rand des Elements mit der Breite des Fensters zunimmt. Dies ist in der Tat das Ergebnis für meine einfache <p>-Tag.

Wenn das Element jedoch floated ist oder eine Breite hat, verhält sich der prozentuale Abstand nicht wie erwartet, wenn die Größe des Fensters geändert wird. Die Auffüllung ist berechnet korrekt beim Laden. Wenn das Fenster in der Größe geändert wird, scheint die Gesamthöhe der Elemente, die schweben oder breit sind, gleich zu bleiben. Text in dem Element ist unerklärlicherweise am unteren Rand eines Bereichs, der mysteriöse Höhe erreicht. Dies geschieht für Elemente wie folgt:

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

Hier ist ein Bild, um zu veranschaulichen, was ich sehe. Farbcodierung wird von Firebug hinzugefügt; Lila ist Padding, Gelb ist Rand, und Blau ist der Inhalt des Elements.

Was verursacht diese Inkonsistenz? Kann jemand anderes dieses Problem in Firefox (oder einem anderen Browser) reproduzieren?

---

Hier ist ein fiddle to demonstrate. Versuchen Sie in Firefox, den Ergebnisbereich zu erweitern oder zu verkleinern, um die Größe der Elemente zu sehen.

Ich habe kein lauffähiges Code-Snippet hinzugefügt, da ich keine einfache Möglichkeit fand, den Snippet-Bereich on-the-fly zu skalieren.

Ich habe ein Stack-Snippet hinzugefügt, um das Problem zu demonstrieren. Verwenden Sie die Schaltfläche "Ganze Seite", um die Fensterbreite zu vergrößern.

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

Das ist seltsam. Ich bin mir nicht sicher, ob es ein Fehler ist. Aber durch Ändern der Anzeige auf Flex scheint das Problem zu lösen. 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

können Sie ein Pseudo-Element verwenden, um den Fehler zu vermeiden und jene Höhe von 10% 's Breiten Wunsch zu löschen.

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>