CSS flexbox 在 IE10 中不起作用

Posted 2023-03-06

【中文标题】CSS flexbox 在 IE10 中不起作用

【英文标题】：CSS flexbox not working in IE10

【发布时间】：2013-08-03 21:00:03

【问题描述】：

在 IE10 中，此代码无法正常工作：

.flexbox form 
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;


.flexbox form input[type=submit] 
    width: 31px;


.flexbox form input[type=text] 
    width: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex: auto 1;
    -moz-flex: auto 1;
    -ms-flex: auto 1;
    -o-flex: auto 1;
    flex: auto 1;

应该发生的是input[type=submit] 应该是 31px 宽，input[type=text] 占用 form 中剩余的可用空间。发生的事情是 input[type=text] 出于某种原因默认为 263px。

这在 Chrome 和 Firefox 中运行良好。

【问题讨论】：

IE flexible box model not working 的可能重复项

不要只是随机应用前缀，由于多个 Flexbox 草案实现，它不起作用：gist.github.com/cimmanon/727c9d558b374d27c5b6

Flexbox 浏览器支持：***.com/a/35137869/3597276

请注意弹性项目应该是 display:block;在 IE10 中。

使用自动前缀。

【参考方案1】：

在 IE 中还没有（完全）原生支持 Flex 布局模式。 IE10 实现了规范的“补间”版本，它不是最新的，但仍然有效。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

这篇 CSS-Tricks 文章对跨浏览器使用 flexbox（包括 IE）有一些建议： http://css-tricks.com/using-flexbox/

编辑：经过更多研究，IE10 flexbox 布局模式在 2012 年 3 月的 W3C 草案规范中实施：http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

最新的草稿是一年左右的时间：http://dev.w3.org/csswg/css-flexbox/

【讨论】：

IE10支持旧版本，请查看您发布的链接中的注释[1]。

是的，有一些以-ms- 为前缀的 flexbox 供应商属性，但据我了解，它们基于 CSS3 flexbox 规范的过时版本（除非 MDN 信息刚刚过时，这是可能的） .

我不在乎它是否是一个较旧的规范，如果它有效，至少部分有效，那很好。我正在尝试改编您发布的 CSS 技巧文章中的内容，如果修复了，我会报告。

我能够使用您链接到的 CSS 技巧文章来完成这项工作，实际上我现在对我的代码出了什么问题有了更多了解。

微软完全放弃对 IE10 的支持肯定不会太久...我想知道我们有多少客户使用 Windows Server 2012...xfive.co/blog/stop-supporting-ie10-ie9-ie8

【参考方案2】：

正如 Ennui 提到的，IE 10 支持带有 -ms 前缀的 Flexbox 版本（IE 11 支持不带前缀的版本）。我可以在您的代码中看到的错误是：

您应该使用display: -ms-flexbox 而不是display: -ms-flex 我认为您应该指定所有 3 个 flex 值，例如 flex: 0 1 auto 以避免歧义

所以最后更新的代码是……

.flexbox form 
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;

    /* Direction defaults to 'row', so not really necessary to specify */
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;


.flexbox form input[type=submit] 
    width: 31px;


.flexbox form input[type=text] 
    width: auto;

    /* Flex should have 3 values which is shorthand for 
       <flex-grow> <flex-shrink> <flex-basis> */
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -o-flex: 1 1 auto;
    flex: 1 1 auto;

    /* I don't think you need 'display: flex' on child elements * /
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    /**/

【讨论】：

正确 - 你不需要需要 display: flex on children (<input>)。它是 display: flex 在包含元素上 - 打开 flexbox - 和 flex: ... 在子元素上指定大小等。

【参考方案3】：

IE10 使用旧语法。所以：

display: -ms-flexbox; /* will work on IE10 */
display: flex; /* is new syntax, will not work on IE10 */

见css-tricks.com/snippets/css/a-guide-to-flexbox:

(tweener) 表示 [2012] 中的一种奇怪的非官方语法（例如 display: flexbox;）

【讨论】：

('first post' comment) 不鼓励仅链接答案（因为链接目标可能会消失）。添加链接很好，但一点信息（理想情况下足以回答问题）是更好的做法。谢谢！。