Warum lässt Firefox den Abstand am unteren Rand von Elementen mit „Overflow: Scroll' weg?

Fehlerbehebung beim Firefox-Padding-Auslassen mit Overflow

Beim Implementieren der beiden CSS-Eigenschaften „overflow: scroll“ und „padding“ können Benutzer auf ein Problem stoßen, bei dem Firefox das unterdrückt Auffüllung am unteren Rand des Elements, im Gegensatz zu Browsern wie Chrome und Safari.

Problemszenario:

`

<li>padding above first line in every Browser</li>
<li>content</li>
<li>content</li>
...
<li>content</li>
<li>content</li>
<li>content</li>
<li>no padding after last line in Firefox</li>

In diesem Snippet hat das Element eine Höhe von 100 Pixel, einen Abstand von 50 Pixel, a roter Rand und vertikaler Scroll-Überlauf. In Firefox fehlt jedoch die Polsterung am unteren Rand des Containers, was zu einem unerwarteten Erscheinungsbild führt.

Problemumgehung:

Dieses Problem mag zwar verwirrend erscheinen, ist aber relativ Eine einfache reine CSS-Lösung kann das Problem lösen:

<code class="css">.container:after {
    content: "";
    height: 50px;
    display: block;
}</code>

Durch Hinzufügen dieser CSS-Regel fügen Sie ein leeres Element mit einer Höhe ein, die der Innenauffüllung des Containers entspricht. Dieses Element dient als Platzhalter und stellt sicher, dass die Polsterung auch bei Scroll-Überlauf konsistent beibehalten wird.

Demonstration:

[Fiddle](https://jsfiddle.net /rdx8k4mz/) zeigt die Problemumgehung.

Das obige ist der detaillierte Inhalt vonWarum lässt Firefox den Abstand am unteren Rand von Elementen mit „Overflow: Scroll' weg?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!