首页 > web前端 > css教程 > 正文

为什么'flex-direction:column-reverse”在 Firefox、Edge 和 IE/Edge 中禁用滚动条?

DDD
发布: 2024-11-01 01:59:02
原创
933 人浏览过

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板