Warum verbirgt Firefox den Innenabstand in scrollenden Überlaufcontainern und wie können wir das Problem beheben?

Warum verbirgt Firefox den Abstand bei scrollenden Überlaufcontainern?

Firefox weicht von anderen Browsern ab, wenn die overflow:scroll-Eigenschaft in Kombination mit dem Abstand für ein Element verwendet wird. In Firefox verschwindet der Abstand am unteren Rand des Elements, was zu einer Diskrepanz beim Rendern führt.

Identifizieren des Problems

Beachten Sie den folgenden Code:

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

<code class="html"><div class="container">
  <ul>
    <!-- ... list items ... -->
  </ul>
</div></code>

In Chrome und Safari wird der untere Rand des Containers korrekt angezeigt, in Firefox verschwindet er jedoch.

Lösung des Problems

Nach der Zusammenarbeit mit anderen Entwicklern haben wir mithilfe von reinem CSS eine Problemumgehung gefunden:

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

Dadurch wird nach dem Container ein leeres Element hinzugefügt, wodurch die fehlende Polsterung effektiv nachgebildet wird.

Demonstration

Probieren Sie die Geige unten aus, um die Lösung in Aktion zu sehen:

[Fiddle]()

Fazit

Obwohl es keine ideale Lösung ist, behebt diese Problemumgehung das Problem des Verschwindens der unteren Auffüllung in Firefox bei Verwendung von overflow: scroll.

Das obige ist der detaillierte Inhalt vonWarum verbirgt Firefox den Innenabstand in scrollenden Überlaufcontainern und wie können wir das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!