1

我正在使用Flexie display: box; 以便能够将显示框与IE.

如这里的讨论所示

我有 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;
}

这是展示问题的页面： 预览站点

4

1 回答 1

3

感谢@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;

}
于 2013-06-23T07:07:48.133 回答