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 の代わりにfloat: lefts を使用して回避しました。興味深いと思っただけで、レンダリングが異なる理由と、どのレンダリングが正しいかを知りたいと思っています。Chromeが間違っていると思いますが、そうではないかもしれません。

4

2 に答える 2

1

overflow: hidden を外側の DIV に追加するだけで、outer がその高さを拡張してフローティングの子に対応できるようになります。

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

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

于 2013-03-21T14:45:25.477 に答える
0

問題を修正するには削除

clear: both;

.outerdivで

より多くの外側のdivを互いに下に置きたい場合は<br>、それらの間に置くだけです。

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

于 2013-03-21T14:40:31.510 に答える