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中文网其他相关文章!