IE9中的灵活布局[重复]答案

【问题标题】：Flexible layout in IE9 [duplicate]IE9中的灵活布局[重复]
【发布时间】：2015-12-22 12:00:09
【问题描述】：

我想用应该适合一个 div 的列来构建布局。问题是在 Internet Explorer 9 中没有正确显示它们。对于 chrome/firefox，我使用了display: flex;，然后设置了width: n%，所以一切都很简单。

在 IE9 中打开时出现问题。列显示没有宽度和高度。我试过flexie，但我不能让它工作：

我尝试了什么： HTML：

        <div style="height: 100%">
        <div id="boxwrapinner">
            <div id="box1" ></div>
            <div id="box2"></div>
            <div id="box3"></div>
        </div>
    </div>

CSS

    #boxwrapinner {
  display: box;
  box-orient: vertical;
  box-direction : reverse;
  width:100%;
  height:100%;
}

#box1 {
box-ordinal-group: 2;

    border: 1px solid red;
}

#box2 {
box-ordinal-group: 2;

    border: 1px solid red;
}

#box3 {
box-ordinal-group: 2;
    border: 1px solid red;
}

也许有人使用过 flexie，并且可以告诉我除了导入 .js lib 文件之外需要什么。

还将了解IE9如何实现div的列布局egzmpl的解决方案：

【问题讨论】：

您必须为您的元素初始化 Flexie。请参阅文档的创建新的 Flexie 对象部分。

标签： javascript html css internet-explorer flexbox

【解决方案1】：

我对此进行了一些尝试，我认为问题在于 DIV 是 display: block。我将其更改为 inline-block 并且效果很好

<html>
<head></head>
<style>
#boxwrapinner {
    display: flex;
    flex-direction: row;
}

.box {
    flex: 1 1 33%;
    height: 200px;
    width: 33%;
    display: inline-block;
}

#box1 {
    border: 1px solid red;
}

#box2 {
    border: 1px solid red;
}

#box3 {
    border: 1px solid red;
}
</style>
<body>
<div style="height: 100%">
        <div id="boxwrapinner">
            <div id="box1" class="box"></div>
            <div id="box2" class="box"></div>
            <div id="box3" class="box"></div>
        </div>
    </div>
</body>
</html>

编辑：

使用这个更新的 CSS，即使不指定高度也可以工作：

.box {
    width: 33%;
    display:table-cell;
}

#box1 {
    border: 1px solid red;
}

#box2 {
    border: 1px solid red;
}

#box3 {
    border: 1px solid red;
}

【讨论】：

有效，仅当 `height: 200px;` 以像素为单位设置。也许有可能使它与height:100% 或其他方式来抓住所有空间？？
height: 100% 不幸的是并没有真正起作用哦，我想通了，只需使用 display:table-cell; 作为盒子，你甚至不需要所有 flexbox 的东西
table-cell 示例在 IE9 中不适合我
是的，我忘了。我在其中一个 div 中添加了一些文本。因此，如果您添加一些lipsum 或其他DIV 应该延伸到最大的高度。但如果你真的使用这种布局，其中一个 DIV 可能有足够的内容来适应屏幕，所以这应该不是问题