在那里,
我将要实现一个模块,它需要用纯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-basis
vals并将label
设置为display: block
最佳答案
你可能是在某种兼容模式下运行IE?
对我来说,它显示了你大部分的小提琴好。唯一的问题是输入高度;我是这样解决的
input {
margin: 4px;
flex: 16px 1; // added 16px as flex-basis
}
fiddle