在那里,
我将要实现一个模块,它需要用纯CSS定位标签和输入,并使用flexbox。
我刚刚遇到了一些问题,IE 11似乎呈现出不同于最新版本的FF(v28)和Chrome(v34):
FF和Chrome:
IE 11:
下面是我在图片中标记的3个明显问题:
IE 11似乎没有正确调整容器DIV的高度
第二个标题的宽度不正确(width: 200px;
第一个标题的位置不正确(-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-basisvals并将label设置为display: block

最佳答案

你可能是在某种兼容模式下运行IE?
对我来说,它显示了你大部分的小提琴好。唯一的问题是输入高度;我是这样解决的

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

fiddle

10-05 20:39
查看更多