Heim  >  Artikel  >  Web-Frontend  >  Warum deaktiviert „Flex-Direction: Column-Reverse' die Bildlaufleiste in Firefox, Edge und IE/Edge?

Warum deaktiviert „Flex-Direction: Column-Reverse' die Bildlaufleiste in Firefox, Edge und IE/Edge?

DDD
DDDOriginal
2024-11-01 01:59:02924Durchsuche

Why does `flex-direction: column-reverse` disable the scrollbar in Firefox, Edge, and 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:

  • Bug 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
  • Philip Walton / Flexbugs – Column-Reverse und Overflow-y nicht scrollbar https://github.com/philipwalton/flexbugs/issues /618

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn