Firefox、Edge 和 IE 中的 Flexbox 列反转问题
创建响应式应用程序时,通常使用 Flexbox 来显示内容。在某些情况下,您可能希望在屏幕尺寸发生变化时反转元素的顺序。虽然这在 Chrome 中可以无缝运行,但在 Firefox、Edge 和 Internet Explorer 中会出现一个令人费解的问题。
当使用 flex-direction: column-reverse 反转项目顺序时,该问题变得明显。在 Chrome 中,滚动条的行为符合预期,允许用户向上滚动以查看之前的项目。但是,在受影响的浏览器中,滚动条会出现但保持禁用状态。
为了演示此问题,让我们检查以下代码:
<code class="css">#list { display: flex; flex-direction: column-reverse; height: 250px; overflow-y: scroll; border: 1px solid black; } .item { flex: 1; padding: 2em; border: 1px dashed green; }</code>
使用此代码时,您会注意到Firefox、Edge 和 IE 中存在上述问题。
根本原因和解决方法
此问题源于受影响浏览器中存在的错误。具体来说,当使用flex-direction:column-reverse和overflow-y:auto时,滚动条无法按预期工作。
作为解决方法,您可以使用column而不是flex-direction:column-reverse 。这种方法将实现相同的视觉效果,并确保滚动条在所有支持的浏览器中正常工作。
其他信息
有关此问题的更多详细信息和见解,请参阅到以下资源:
以上是为什么“flex-direction:column-reverse”在 Firefox、Edge 和 IE 中禁用滚动?的详细内容。更多信息请关注PHP中文网其他相关文章!