2012-07-07 85 views
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} 

回答

0

我看着它在Chrome中,而且似乎给人一种Flexbox的一个float属性时是一个问题。 960网格中的网格类包括一个浮点数:左侧

当网格类被删除时,它们具有相同的行为。