Question

我正在使用Flexie display: 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

Answer 1

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

.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;

}

IE CSS“显示：框”替代使用Flexie无法正确显示

1 个答案: