gpt4 book ai didi

html - IE 10-11 flex-basis 属性的行为不同于 webkit 浏览器

转载 作者:技术小花猫 更新时间:2023-10-29 12:40:38 25 4
gpt4 key购买 nike

我正在尝试使用 Media object , 由一个 Media-body 和一个 Media-figure 组成。 HTML 和类遵循这种形式(顺序无关紧要)。

.Media
.Media-figure
.Media-body

简单的 CSS 是(没有前缀):

.Media { 
display: flex
}

.Media-figure {
flex: 0 0 auto;

/* same as...
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
*/
}

.Media-body {
flex: 1 1 0;

/* same as...
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
*/
}

请注意,我正在将 Media-figure flex-shrink factor 调整为 0(与我发布的链接相反)。我假设 Media-figure 的大小是固定的,如果空间太小,我们不想让它变小。

Media-body 使用 flex-basis: 0 应该将元素设置为没有初始大小,然后允许它消耗剩余的可用空间因为它是唯一具有 flex-grow: 1 的元素。然而,在 IE10-11 中,flex-basis: 0 导致 Media-body 宽度为内部元素的宽度,如果太宽则破坏任何环绕行为内容多。

http://jsfiddle.net/sgardn04/3enpp4wg/

(注意:如果您在 chrome 中查看它们,它们看起来完全一样。使用 IE10-11!)

我目前的解决方法是设置 Media-body { flex-basis: auto },这似乎可行。我假设 IE 在这里有问题,因为我更喜欢 webkit 浏览器的行为。是否有支持 IE 渲染的规范的合理解释?或者我们可以根据我在此处定义的类来预期 webkit 浏览器的不同行为的任何情况?在这种情况下,这两个属性的行为似乎完全相同。

编辑:我找到了这个 handy graphic ,这似乎表明 flex-basis 属性决定了空间是在考虑元素宽度之前还是之后分配的(flex-basis: 0 vs flex-basis: auto).

最佳答案

不同之处在于 flex-basis 的值没有单位。添加这个(或省略 0)会给你在 IE 中的预期行为:updated fiddle

关于 flex 的 MDN 文档提到了这一点:

A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0% when omitted.

关于html - IE 10-11 flex-basis 属性的行为不同于 webkit 浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28117862/

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