2012-07-07 67 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網格中的網格類包括一個浮點數:左側

當網格類被刪除時,它們具有相同的行爲。