IE 11 的 Flexbox 问题

Question

你好，

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

我只是在 IE 11 上遇到了一些问题，它似乎呈现的东西与最新版本的 FF (v28) 和 Chrome (v34) 不同：

FF 和 Chrome：

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 而是使用 IE 10 进行测试，并且通过使用接受的答案中提到的 flex-basis vals 并将 label 设置为 display: block 解决了问题

Answer 1

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

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

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

fiddle