2
我使用flexbox在Firefox中工作,但在webkit瀏覽器中顯示:box div丟失背景。
這裏是在線測試:
http://www.angeloalpaca.railsperu.com/html/CSS3 Flexbox - 在Safari中失敗960grid
下面是一個簡單的例子,看到背景的浮動Flexbox的DIV消失(WebKit的):
http://www.angeloalpaca.railsperu.com/html/simple.html
的HTML:
<div id="main-wrapper" class="container_12">
<div id="main">
<div id="sidebar-first" class="grid_3">
</div>
<div id="content" class="grid_8">
</div>
</div>
</div>
STYLES
#main{
display: -webkit-box;
-webkit-box-orient: vertical;
display: -moz-box;
box-orient: vertical;
display: box;
box-orient: vertical}
#main #sidebar-first{
padding-top:170px; background:#1a8099;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1}
#content{
min-height:800px; background:red }
STYLES 960格
body{min-width:960px}.container_12{margin-left:auto;margin-right:auto;width:960px}.grid_3,.grid_8{display:inline;float:left;margin-left:10px;margin-right:10px}