2012-07-07 5 views
2

Firefox에서 flexbox가 작동하지만 webkit 브라우저에서 display : box div 배경이 손실됩니다.
http://www.angeloalpaca.railsperu.com/html/simple.htmlCSS3 Flexbox - 960grid의 Safari에서 실패 함

html로 :

, 배경이 떠 인 flexbox의 DIV에 사라 (웹킷)를 참조하십시오 여기에 http://www.angeloalpaca.railsperu.com/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> 


스타일

#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

내가 크롬에보고하고, 인 flexbox에게 플로트 속성을 부여 할 때 문제가 될 것 같습니다거야. 960 그리드의 그리드 클래스는 float를 포함합니다 : 왼쪽.

그리드 클래스를 제거하면 동일한 동작을합니다.