首頁  >  文章  >  web前端  >  為什麼「flex-direction:column-reverse」在 Firefox、Edge 和 IE/Edge 中停用滾動條?

為什麼「flex-direction:column-reverse」在 Firefox、Edge 和 IE/Edge 中停用滾動條?

DDD
DDD原創
2024-11-01 01:59:02847瀏覽

Why does `flex-direction: column-reverse` disable the scrollbar in Firefox, Edge, and IE/Edge?

Flexbox 在不同瀏覽器中的列反轉行為

Flexbox 提供了強大的佈局系統,但在跨瀏覽器實現某某某某某有些屬性時會出現不一致。其中一個問題涉及 Firefox、Edge 和 IE 中的 flex-direction: column-reverse 屬性的行為。

問題

考慮以下HTML 和CSS代碼:

<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>

預期行為

當此程式碼在Chrome 中顯示時,它會建立一個可以向上捲動查看的垂直項目清單之前的條目。

意外行為

但是,在 Firefox、Edge 和 IE/Edge 中,捲軸顯示為停用。

原因

此行為源自於上述瀏覽器中的錯誤。當使用flex-direction:column-reverse時,滾動條僅在Chrome中起作用。如果將column-reverse更改為簡單的column,則滾動條將在所有瀏覽器中運作。

其他資訊

有關此錯誤的更多詳細信息,請參閱以下內容資源:

  • Bug 1042151 - https:/ /bugzilla.mozilla.org/show_bug.cgi?id=1042151
  • Philip Walton / flexbugs - 列反轉和溢出不是可滾動https://github.com/philipwalton/flexbugs/issues/618

以上是為什麼「flex-direction:column-reverse」在 Firefox、Edge 和 IE/Edge 中停用滾動條?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn