0

测试用例http://codepen.io/anon/pen/hFumw。
在除 chrome 之外的所有浏览器中都能正常工作。在 chrome 中，宽度的.container计算就像.child.one元素不浮动一样。有没有办法解决这种行为？
HTML：

<div class="container">
  <div class="header">
  header
  </div>
  <div class="child one">
  </div>
  <div class="child one">
  </div>
  <div class="child one">
  </div>
</div>

CSS： 

.container {
  background:red;
  padding:10px;
  display: inline-block;
  overflow:hidden;
  .child {
    width:100px;
    height: 100px;
    background: green;
    float:left;
    clear:left;
    border: 1px solid blue;
  }
  .one {
    float: left;
    clear:left;
    background:yellow;
  }
  .header {
    background:blue;
  }
}

升级版： 

.header {
  float: left;
  width: 100%;
}

在我的特定情况下是不可接受的。

4

2 回答 2

0

遵循 CSS 似乎在 Chrome 和 FF 中运行良好。请参阅标头声明。

body {
  text-align: center;
}
.container {
  margin-left:auto;
  margin-right:auto;
  background:red;
  padding:10px;
  display: inline-block;
  overflow:hidden;
  .child {
    width:100px;
    height: 100px;
    background: green;
    float:left;
    clear:left;
    border: 1px solid blue;
  }
  .one {
    float: left;
    clear:left;
    background:yellow;
  }
  .two {
    float: right;
    margin-left:0px;
    clear: right;
  }
  .header {
    background:blue;
    display:block;
    float:left;
    width:100%;
  }
}
于 2013-02-14T15:21:18.623 回答
0

尝试将此CSS添加到.header

clear:both;
float:left;
width:100%
于 2013-02-14T15:24:09.613 回答