CSS flexbox 在 IE10 中不起作用 [英] CSS flexbox not working in IE10

问题描述

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

In IE10, this code isn't working correctly:

.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] 占用 input[type=text] 内的其余可用空间代码>形式.发生的情况是 input[type=text] 由于某种原因默认为 263px.

What should happen is that input[type=submit] should be 31px wide, with input[type=text] taking up the rest of the available space within form. What happens is input[type=text] just defaults to 263px for some reason.

这在 Chrome 和 Firefox 中运行良好.

This works fine in Chrome and Firefox.

推荐答案

IE 尚未(完全)原生支持 Flex 布局模式.IE10 实现了规范的tween"版本，该版本不是最新的，但仍然有效.

Flex layout modes are not (fully) natively supported in IE yet. IE10 implements the "tween" version of the spec which is not fully recent, but still works.

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

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

This CSS-Tricks article has some advice on cross-browser use of flexbox (including IE): http://css-tricks.com/using-flexbox/

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

edit: after a bit more research, IE10 flexbox layout mode implemented current to the March 2012 W3C draft spec: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

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

The most current draft is a year or so more recent: http://dev.w3.org/csswg/css-flexbox/

这篇关于CSS flexbox 在 IE10 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！