Warum ignoriert Firefox das Auffüllen bei Verwendung von „Overflow: Scroll“?

Firefox ignoriert die Auffüllung bei Verwendung von Überlauf: Scrollen

Bei Verwendung von Überlauf: Scrollen mit Auffüllungsstilen tritt in Firefox ein rätselhaftes Problem auf: der untere Teil Die Polsterung des Elements verschwindet. Dieses Verhalten wird sowohl in Szenarios mit direktem als auch geerbtem Auffüllen beobachtet.

Ursache:

Die genaue Ursache des Problems ist unbekannt, scheint aber auf das Rendering-Verhalten von Firefox zurückzuführen zu sein wobei übergelaufener Inhalt abgeschnitten wird, ohne die Auffüllung zu berücksichtigen.

Workaround:

Um diese Inkonsistenz zu kompensieren, kann eine reine CSS-Lösung implementiert werden:

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

Erklärung:

Dieses CSS-Snippet fügt nach dem Container ein leeres Pseudoelement hinzu. Indem die Höhe auf den gleichen Wert wie der untere Abstand und die Anzeige auf „Blockieren“ eingestellt wird, wird ein unsichtbarer Puffer erstellt, der Firefox dazu zwingt, den Abstand zu respektieren.

Einschränkungen:

Diese Problemumgehung behebt zwar das Problem, führt jedoch zu einer Einschränkung:

• Wenn der Inhalt im scrollbaren Container über die Höhe des Containers hinausgeht, wird die zusätzliche Höhe des Pseudoelements sichtbar.

Um dies zu vermeiden, können Sie JavaScript verwenden, um die Höhe des Pseudoelements basierend auf der Höhe des übergelaufenen Inhalts dynamisch anzupassen und so sicherzustellen, dass es verborgen bleibt, während die Auffüllung berücksichtigt wird.

Das obige ist der detaillierte Inhalt vonWarum ignoriert Firefox das Auffüllen bei Verwendung von „Overflow: Scroll“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!