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}