Question

以下html在Chrome和Firefox中的呈现方式不同。

<!DOCTYPE html>
<html>
  <head>
    <style>
       .outer {
         margin-top: 10px;
         clear: both;
       }
       .inner {
         float: left;
       }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"> Inner1 </div>
      <div class="inner"> Inner2 </div>
    </div>
  </body>
</html>

在Firefox（和IE10）中，Inner1和Inner2垂直排列。在Chrome中，Inner2比Inner1低10px。发生了什么事？

小提琴：http://jsfiddle.net/C8wLT/

我的Chrome版本为25.0.1364.172 m
我的Firefox是版本19.0.2

编辑：在此问题的实际（非简化）版本中，我使用display: inline-block而不是float: left来解决这个问题，我只是想到了很好奇，并希望了解它为什么呈现不同，以及哪种渲染是正确的。我认为Chrome错了，但也许没有。

Answer 1

只需添加溢出：隐藏到外部DIV，这将允许外部扩展其高度以容纳它的漂浮儿童。

.outer {
    margin-top: 10px;
    overflow: hidden;
}

http://jsfiddle.net/C8wLT/1/

Answer 2

解决问题删除

clear: both;

在你的.outer div。

如果你想在彼此之下有更多的外部div 只需在它们之间添加一个<br>。

http://jsfiddle.net/d9mS2/3/

Chrome中的奇怪渲染问题，带有margin-top的div中的浮动

2 个答案: