css - Microsoft Edge 浏览器破坏了嵌套的 flex 子项
问题描述
我正在使用 flexbox 创建一个简单而优雅的基于 flexbox 的响应式布局。这是示例 HTML:
<div class="box">
<section class="box concise">
<div class="box">
this is just for test
</div>
</section>
<!-- I can add more sections here,
to serve as "cards", for example -->
</div>
以下是样式:
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.box>.concise {
flex-basis: auto;
flex-grow: 0;
}
的目的flex-basis: 0; flex-grow: 1; max-width: 100%;
是我的样式表默认设置在所有 flex 子项上,这样每个 flex 子项只会增长到内容所需的量,但仍会填充宽度,如果需要则进行换行。它工作得很好。
可选flex-basis: auto; flex-grow: 0;
的是让 flex 子项像以前一样只根据需要增长,但不会增长得比这更大,本质上是将 flex 项目收缩包裹在内容周围。
我将用它<section>
来区分除非需要才不会增长的“卡片”。
section {
background-color: white;
border: 1px solid black;
}
在 Firefox 和 Chrome 上看起来很漂亮。但它在 Microsoft Edge 42.17134.1.0 (EdgeHTML 17.17134) 上完全中断。在 Edge 上,<section>
我用于卡的完全缩小了,就好像我将它从正常流程中浮动出来一样。内容仍然显示,完全超出了<section>
. 你可以在这里试试:
https://jsfiddle.net/garretwilson/wgo8rqxf/4/
<div>
我可以通过更改内部的 flex 属性(通过使用concise
上面的样式类)在 Edge 上解决这个问题:
<div class="box">
<section class="box concise">
<div class="box concise">
this is just for test
</div>
</section>
</div>
但是手动添加这种concise
样式并不是一个可行的解决方案。我不能手动更改子 flex 属性以防止它在 Edge 上中断。此外,它会改变孩子们的行为方式。例如,如果我在 上设置宽度<section>
,我希望它的子项填充空间。
这是一个已知的带有 flex 子节点的 Edge 错误吗?内部不应该<div>
根据其内容的需要增长吗?
同样重要的是,有没有人知道我可以在样式表中放置一个通用的解决方法,以防止 Edge 折叠层次结构中的弹性项目,而无需在 HTML 本身中添加任意标记或样式?
解决方案
这个问题的解决方法其实很简单。然而,解释并没有那么多。
解决方案
不要在flex-basis
. 它破坏了 Microsoft 浏览器(IE 和 Edge)中的 flex 布局。
而不是这个,你在你的代码中:
.box > * {
flex-basis: 0;
}
用这个:
.box > * {
flex-basis: 0%;
}
这样就解决了问题。
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex-basis: 0%; /* adjustment */
flex-grow: 1;
max-width: 100%;
}
.box>.concise {
flex-basis: auto;
flex-grow: 0;
}
section {
background-color: white;
border: 1px solid black;
}
<div class="box">
<section class="box concise">
<div class="box">
this is just for test
</div>
</section>
</div>
解释
根据flexbox 规范,对属性使用无单位值应该没有问题flex-basis
。
然而,在现实中,IE 和 Edge 在渲染这些值时存在问题。
这些帖子探讨了这个问题:
因此,作为适用于 IE 和 Edge 的安全跨浏览器替代方案,请勿在flex-basis
. 这既适用于flex-basis
长期财产,也适用于财产的组成部分flex
。