IE 11 的 Flexbox 问题

Posted 2023-03-05

【中文标题】IE 11 的 Flexbox 问题

【英文标题】：Flexbox issues with IE 11

【发布时间】：2014-06-08 07:58:21

【问题描述】：

你好，

我即将实现一个模块，该模块需要使用纯 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 解决了问题

【参考方案1】：

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

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

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

fiddle

【讨论】：

我刚刚意识到我实际上是在使用 IE 10 时才意识到这种行为......解决方案是将label 设置为display: block 和你提到的flex-basis！