Html IE 11的Flexbox问题

Hy在那里，

我将要实现一个模块，它需要使用纯CSS定位标签和输入，并且正在使用flexbox

我只是在IE 11上遇到了一些麻烦，它似乎与FF（v28）和Chrome（v34）的最新版本有所不同：

FF和铬：

IE 11：

下面是我在图中也标记的3个明显问题：

IE 11似乎没有正确调整容器DIV的高度

第二个标题的宽度不正确（

宽度：200px；

）

第一个标题的位置不正确（

-ms flex-order:2；

）

下面是完整的代码和一个工作示例（）：

HTML:

如果有人能帮我解决这个问题，或者至少给我指出正确的方向，我会非常感激；）

谢谢

---

编辑：

---

我刚刚意识到我实际上不是在用IE 11进行测试，而是用IE 10进行测试，通过使用公认答案中提到的

flex basis

VAL并将

标签设置为
display:block
可以解决这个问题，您是否正在以某种兼容模式运行IE

对我来说，它显示了你的大部分小提琴ok。唯一的问题是输入高度；我是这样解决的

input {
    margin: 4px;
    flex: 16px 1;    // added 16px as flex-basis
}

我刚刚意识到我实际上是在使用IE 10，在那里我意识到了这种行为。。。解决方案是将
标签设置为
display:block
和您提到的
flex-basis
！
div {
    background: lightgreen;

    -webkit-align-self: stretch;
    align-self: stretch;

    -webkit-flex-shrink: 0 !important;
    flex-shrink: 0 !important;

    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

div.caption-top, div.caption-bottom {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;

    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

label {
    width: 200px;
    margin: 4px;

    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
}

div.caption-left label, div.caption-top label {
    -webkit-box-ordinal-group: 0;
    -moz-box-ordinal-group: 0;
    -ms-box-ordinal-group: 0;
    -ms-flex-order: 0;
    order: 0;
}

input {
    margin: 4px;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
}

input {
    margin: 4px;
    flex: 16px 1;    // added 16px as flex-basis
}