使用 Flexie 的 IE CSS "display:box" 替代方案无法正确显示答案

【问题标题】：IE CSS "display:box" alternative using Flexie not displaying correctly使用 Flexie 的 IE CSS "display:box" 替代方案无法正确显示
【发布时间】：2013-06-20 07:13:11
【问题描述】：

我正在使用Flexiedisplay: box;，以便能够将显示框与IE一起使用。

如讨论here所示

我有3个盒子，中间的一个是fixed width: 1138px 左右框拉伸以适应。

但似乎无法克服一个问题：右边的框跳到下一行。

这里是html代码：

<div class="wraper-top">
<div id="header-left">..</div>
<header class="header">..</header>
<div id="header-right">..</div>
</div>

这是css：

.wraper-top {
width:100%;
height:95px;
margin:0 auto;
position:relative;
display: -moz-box;
display: -webkit-box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
display: box;
box-align: start;

}



#header-center { width:1138px; height:48px; display: inline-block} 

#header-left {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
background-color: #000000;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
height:48px;
margin:25px 18px 0px 0px;
}

.header {
position:relative;
z-index:1001;
padding:25px 0px 20px 0px;
width:1138px;
display:block;
}

#header-right {
background-color:#000000;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
height:48px;
margin:25px 0px 0px 18px;
}

这是展示问题的页面： preview site

【问题讨论】：

对于 Opera，你应该使用标准的无前缀显示；柔性;句法。也适用于 IE11。对于 IE10，您应该添加稍旧的显示：-ms-flexbox 语法。
感谢@David Storey。它成功了。

标签： html internet-explorer css opera

【解决方案1】：

感谢@David Storey，这是 ie10 的改进代码

.wraper-top {
width:100%;
height:95px;
margin:0 auto;
position:relative;
display: -moz-box;
display: -webkit-box;
display: box;
display: -ms-flexbox;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
-ms-flex-wrap: wrap;
box-align: start;

}


#header-left {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
background-color: #000000;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
height:48px;
margin:25px 18px 0px 0px;
-ms-flex:1;
}

.header {
position:relative;
z-index:1001;
padding:25px 0px 20px 0px;
width:1138px;
display:block;
-ms-flex:938px;
}

#header-right {
background-color:#000000;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-ms-flex:1;
height:48px;
margin:25px 0px 0px 18px;

}

【讨论】：