Heim > Artikel > Web-Frontend > Warum deaktiviert „Flex-Direction: Column-Reverse“ die Bildlaufleiste in Firefox, Edge und IE/Edge?
Flexbox-Spaltenumkehrverhalten in verschiedenen Browsern
Flexbox bietet ein leistungsstarkes Layoutsystem, aber bei der Implementierung bestimmter Eigenschaften in verschiedenen Browsern treten Inkonsistenzen auf. Ein solches Problem betrifft das Verhalten der Eigenschaft „flex-direction: columns-reverse“ in Firefox, Edge und IE.
Das Problem
Beachten Sie das folgende HTML und CSS Code:
<code class="html"><div id="list"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div></code>
<code class="css">#list { display: flex; flex-direction: column-reverse; height: 250px; overflow-y: scroll; } .item { flex: 1; padding: 2em; border: 1px dashed green; }</code>
Erwartet Verhalten
Wenn dieser Code in Chrome angezeigt wird, wird eine vertikale Liste von Elementen erstellt, die nach oben gescrollt werden kann, um frühere Einträge anzuzeigen.
Unerwartetes Verhalten
In Firefox, Edge und IE/Edge erscheint jedoch die Bildlaufleiste deaktiviert.
Grund
Dieses Verhalten ist auf einen Fehler in den oben genannten Browsern zurückzuführen. Wenn „flex-direction: Column-reverse“ verwendet wird, ist die Bildlaufleiste nur in Chrome funktionsfähig. Wenn Sie Column-Reverse in Simple Column ändern, funktioniert die Bildlaufleiste in allen Browsern.
Zusätzliche Informationen
Weitere Details zu diesem Fehler finden Sie im Folgenden Ressourcen:
Das obige ist der detaillierte Inhalt vonWarum deaktiviert „Flex-Direction: Column-Reverse“ die Bildlaufleiste in Firefox, Edge und IE/Edge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!