gpt4 book ai didi

css - Microsoft Edge 浏览器破坏了嵌套的 flex 子元素

转载 作者:技术小花猫 更新时间:2023-10-29 11:09:44 24 4
gpt4 key购买 nike

我正在使用 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 child 像以前一样只根据需要增长,但不会增长得更大,本质上是将 flex 元素收缩包裹在内容周围。

我将使用 <section>区分除非需要才会增长的“卡片”。

section {
background-color: white;
border: 1px solid black;
}

在 Firefox 和 Chrome 上看起来很漂亮。但它在 Microsoft Edge 42.17134.1.0 (EdgeHTML 17.17134) 上完全崩溃。在边缘 <section>我正在使用一张完全缩小的卡片,就好像我把它从正常流动中漂浮出来一样。内容仍然显示,完全在 <section> 的范围之外.您可以在这里尝试:

https://jsfiddle.net/garretwilson/wgo8rqxf/4/

我可以通过更改内部 <div> 的 flex 属性来解决 Edge 上的这个问题。 (通过使用上面的 concise 样式类):

<div class="box">
<section class="box concise">
<div class="box concise">
this is just for test
</div>
</section>
</div>

但是手动添加这个concise style 不是可行的解决方案。我不能手动更改子 flex 属性只是为了防止它在 Edge 上中断。此外,它会改变 children 的行为方式。例如,如果我在 <section> 上设置宽度, 我希望它的 children 填补这个空间。

这是一个已知的带有 flex children 的 Edge bug 吗?不应该是内部 <div>根据内容的需要增长?

同样重要的是,有没有人知道一个通用解决方法,我可以将其放入样式表中以防止 Edge 折叠层次结构中的 flex 元素,而无需在 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 specification ,将无单位值与 flex-basis 属性一起使用应该没有问题。

但是,实际上,IE 和 Edge 在呈现此类值时存在问题。

这些帖子探讨了这个问题:

因此,作为在 IE 和 Edge 中工作的安全的跨浏览器替代方案,不要在 flex-basis 上使用无单位值。这既适用于 flex-basis 作为长手属性,也适用于 flex 属性的组件。

关于css - Microsoft Edge 浏览器破坏了嵌套的 flex 子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52123953/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com