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,則滾動條將在所有瀏覽器中運作。
其他資訊
有關此錯誤的更多詳細信息,請參閱以下內容資源:
以上是為什麼「flex-direction:column-reverse」在 Firefox、Edge 和 IE/Edge 中停用滾動條?的詳細內容。更多資訊請關注PHP中文網其他相關文章!