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宽，输入[type = text] 占用 / code>。发生什么是 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.

推荐答案

Flex布局模式在IE中没有（完全）本地支持。 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文章提供了有关跨浏览器使用of flexbox（including 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屋！