2

Firefox で flexbox が動作するようになりましたが、webkit ブラウザーでは display:box div の背景が失われます。
オンラインテストはこちら:
http://www.angeloalpaca.railsperu.com/html/

以下は簡単な例です。フローティング フレックスボックス 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>


スタイル

#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 }


スタイル 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}
4

1 に答える 1

0

Chrome で見ているのですが、flexbox に float 属性を与えると問題が発生するようです。960 grid の grid クラスにはfloat: leftが含まれています。

グリッド クラスが削除されると、同じ動作になります。

于 2012-07-20T23:07:32.620 に答える