0

以下 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-blocks 而不是 s 来解决它float: left，我只是觉得它很好奇，并希望了解它为什么呈现不同，以及哪种呈现是正确的。我假设 Chrome 弄错了，但也许不是。

4

2 回答 2

1

只需将 overflow: hidden 添加到外部 DIV 中，这将允许外部扩展其高度以容纳它的浮动子级。

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

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

于 2013-03-21T14:45:25.477 回答
0

解决问题删除

clear: both;

在您的 .outer div 中。

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

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

于 2013-03-21T14:40:31.510 回答