CSS IE9 根本不支持 display: inline-flex 吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26490404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:41:54  来源:igfitidea点击:

Does IE9 not support display: inline-flex at all?

cssinternet-explorerflexboxinternet-explorer-9

提问by maverick

I've been looking around StackOverflow and even else where to find if display: inline-flex;works in IE9. I posted a question before this when I had trouble with expanding a width dynamically, question here.

我一直在寻找 StackOverflow 甚至其他地方可以找到是否display: inline-flex;在 IE9 中工作。当我在动态扩展宽度时遇到问题时,我在此之前发布了一个问题,问题在这里。

The answer helped me out, thank you who ever you are! Now that I've fixed the issue and it works fine in Chrome, Opera, Mozilla, Safari, IE10+, I still have trouble making this work in IE9.

答案帮助了我,谢谢你!现在我已经解决了这个问题并且它在 Chrome、Opera、Mozilla、Safari、IE10+ 中运行良好,但我仍然无法在 IE9 中运行。

I've also tried to add pre-fix for display: inline-flex;such as display:-webkit-inline-box, -ms-inline-flexbox, and so on.

我还尝试为display: inline-flex;诸如display:-webkit-inline-box、等添加前缀-ms-inline-flexbox

The problem I had which fixed the whole deal was width: auto;and display: inline-flex;

其中固定整个交易我的问题是width: auto;display: inline-flex;

Working fiddle here

在这里工作小提琴

How can I make this to work in IE9?

我怎样才能让它在 IE9 中工作?

回答by dippas

As you can see here: Can I use FlexBox?Flexbox is not supported in IE9

如您所见:我可以使用 FlexBox 吗?IE9 不支持 Flexbox

Can I use inline-flex

我可以使用 inline-flex

EDIT :Based on OP comment to answer:

编辑:根据 OP 评论回答:

if there's any way to make it work in IE9, with prefix or something?

如果有任何方法可以使其在 IE9 中使用前缀或其他东西?

here is a SO users' answer from another related question:

这是来自另一个相关问题的 SO 用户的回答:

I understand from your question, that you are aware of the fact that IE9 does not support flexbox. A polyfill for flexbox, named flexie.js, does exist (not maintained afaik), but it works using the old 2009 syntax of flexbox.

Using the old syntax is of course not recommended, since the 2009 syntax is really outdated and many browsers won't recognize it anymore. But, you can try to use Autoprefixer, which transforms new-syntax rules to old-syntax rules (while preserving the new-syntax for browsers that do support it).

There are caveats - You won't be able to use inline-style, you would have to write your styles in CSS files, and I don't think it supports dynamic changes to the DOM.

Disclaimer: I haven't tried that method with IE9 + flexie.

我从您的问题中了解到,您知道 IE9 不支持 flexbox。flexbox 的 polyfill,名为flexie.js,确实存在(未维护 afaik),但它使用 2009 年的 flexbox 旧语法。

当然不推荐使用旧语法,因为 2009 语法确实过时了,许多浏览器将不再识别它。但是,您可以尝试使用Autoprefixer,它将新语法规则转换为旧语法规则(同时为支持它的浏览器保留新语法)。

有一些警告 - 您将无法使用内联样式,您必须在 CSS 文件中编写样式,而且我认为它不支持对 DOM 的动态更改。

免责声明:我还没有在 IE9 + flexie 上尝试过这种方法。