gpt4 book ai didi

html - Flexbox 和 Internet Explorer 11(显示 :flex in ? )

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

我打算在未来的元素中放弃“ float ”布局并使用 CSS flexbox。我很高兴看到所有主流浏览器的当前版本似乎都支持(以某种方式)flexbox。

我前往 "Solved by Flexbox"看一些例子。然而,“Sticky Footer”示例在 Internet Explorer 11 中似乎不起作用。我尝试了一下并通过添加 display:flex 让它工作。到 <html>width:100%<body>

所以我的第一个问题是:任何人都可以向我解释一下这个逻辑吗?我只是摆弄了一下,它起作用了,但我不太明白为什么它会那样起作用......

然后是适用于所有浏览器的“媒体对象”示例,除了 - 您猜对了 - Internet Explorer。我也尝试过,但没有成功。

因此,我的第二个问题是:是否有“干净”的可能性让“媒体对象”示例在 Internet Explorer 中运行?

最佳答案

根据 http://caniuse.com/#feat=flexbox :

flex 的 IE10 和 IE11 默认值为 0 0 auto 而不是 0 1 auto,根据规范草案,截至2013年9月"

所以简单来说,如果在您的 CSS 中的某处有类似这样的内容:flex:1,那么它在所有浏览器中的翻译方式并不相同。尝试将其更改为 1 0 0,我相信您会立即发现它有点管用。

问题是这个解决方案可能会搞砸 firefox,但是你可以使用一些 hack 来只针对 Mozilla 并将其改回:

@-moz-document url-prefix() {
#flexible-content{
flex: 1;
}
}

因为 flexbox 是 W3C 候选者而不是官方的,浏览器往往会给出不同的结果,但我想这会在不久的将来改变。

如果有人有更好的答案我想知道!

关于html - Flexbox 和 Internet Explorer 11(显示 :flex in <html>? ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21600345/

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