Warum verschwindet die untere Polsterung in Firefox, wenn Overflow: Scroll verwendet wird?

Padding wird in Firefox mit Overflow ignoriert: Scrollen

In bestimmten Szenarios mit der Overflow: Scroll-Eigenschaft und dem Padding von CSS zeigt Firefox ein eigenartiges Verhalten Die Polsterung am unteren Rand eines Elements verschwindet. Dies steht im Gegensatz zu der erwarteten Funktionalität, die in Browsern wie Chrome und Safari beobachtet wird.

Das Problem entsteht, wenn Sie die Eigenschaft „overflow: scroll“, die vertikales Scrollen für das Element ermöglicht, mit der Eigenschaft „padding“, die definiert, kombinieren Abstand zwischen dem Inhalt des Elements und seinem Rand. In Firefox verschwindet der Abstand am unteren Rand des Elements, sodass sichtbarer Inhalt über den Rand des definierten Abstandsbereichs hinausragt.

Um das Problem zu veranschaulichen, betrachten Sie den folgenden CSS-Code:

<code class="css">.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}

ul,
li {
  padding: 0;
  margin: 0;
}</code>

Wenn dieser Code auf eine HTML-Struktur wie die folgende angewendet wird, werden Sie in Firefox den fehlenden Abstand am unteren Rand des Elements bemerken, während es in anderen Browsern wie erwartet angezeigt wird:

<code class="html"><div class="container">
  <ul>
    <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>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</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>
  </ul>
</div></code>

[ Demo anzeigen](Demo-URL)

Um dieses Problem zu beheben, kann eine einfache reine CSS-Lösung eingesetzt werden:

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

Dieser CSS-Code fügt nach dem Containerelement ein Element mit einer festen Höhe hinzu von 50 Pixel (entspricht der unteren Polsterung). Durch das Einfügen dieses Elements schaffen Sie einen sichtbaren Raum, der die fehlende Polsterung ausgleicht und das Problem effektiv löst.

Es ist wichtig zu beachten, dass diese Lösung zwar funktional, aber keine ideale oder elegante Lösung ist. Es bietet jedoch eine Problemumgehung, bis eine verfeinerte Lösung verfügbar ist.

Das obige ist der detaillierte Inhalt vonWarum verschwindet die untere Polsterung in Firefox, wenn Overflow: Scroll verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!