IE CSS「顯示：框」替代使用Flexie不能正確顯示

我使用Flexiedisplay: box;能夠使用顯示框IE。IE CSS「顯示：框」替代使用Flexie不能正確顯示

如圖中討論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

來源

2013-06-20 buzibuzi

對於Opera，您應該使用標準的前置顯示;柔性;句法。也將與IE11一起工作。對於IE10，您應該添加稍舊的顯示器：-ms-flexbox語法。 –

謝謝@David Storey.it工作。 – buzibuzi

這是改進代碼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; 

}

來源

2013-06-23 07:07:48 buzibuzi

IE CSS「顯示：框」替代使用Flexie不能正確顯示

回答

相關問題