Flexbox与IE 11有关

Question

Hy那里，

我即将实施一个需要定位标签和模块的模块。用纯CSS输入，并使用flexbox。

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

FF＆amp;铬：

IE 11：

以下是我在图片中标出的3个明显问题：

1. IE 11似乎没有正确调整容器DIV的高度
2. 第二个标题的宽度不正确（width: 200px;）
3. 第一个标题的位置不正确（-ms-flex-order: 2;）

以下是完整代码和工作示例（http://jsfiddle.net/NTV62/5/）：

HTML：

<div class="caption-bottom">
    <label for="text1">It's the caption:</label>
    <input id="text1" type="text"/>
</div>
<br>
<div class="caption-left">
    <label for="text2">It's the caption:</label>
    <input id="text2" type="text"/>
</div>

CSS：

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;
}

如果有人能帮我解决这个问题，或者至少指出我正确的方向，我真的很感激;）

感谢

---

修改

我刚刚意识到我实际上并没有使用IE 11进行测试，而是通过使用接受的答案中提到的flex-basis val并将label设置为{{1}来解决问题}}

Answer 1

可能是你在某种兼容模式下运行IE？

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

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

fiddle