Chrome中的奇怪渲染问题，浮动广告位于带边距顶部的div [英] Strange rendering issue in Chrome with floats in a div with margin-top
问题描述
以下html在Chrome和Firefox中的呈现方式不同。
The following html renders differently in Chrome and 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。发生了什么事？
In Firefox (and IE10), Inner1 and Inner2 line up vertically. In Chrome, Inner2 is 10px down from Inner1. What's going on?
小提琴： http://jsfiddle.net / C8wLT /
我的Chrome是版本25.0.1364.172 m
我的Firefox是版本19.0.2
My Chrome is version 25.0.1364.172 m
My Firefox is version 19.0.2
编辑：在这个问题的实际（非简化）版本中，我使用 display：inline-block s而不是 float：left ，我只是认为它是好奇，希望学习为什么它渲染不同，以及哪个渲染是正确的。
In the actual (not simplified) version of this problem, I've worked around it using display: inline-blocks instead of float: lefts, I just thought it was curious, and hope to learn why it renders differently, and which rendering is correct. I'm assuming Chrome is getting it wrong, but maybe not.
推荐答案
只需添加overflow：hidden到外部DIV即可允许外部扩展其高度以容纳其浮动的孩子。
Simply add overflow: hidden to the outer DIV which will allow outer to expand its height to accommodate it's floating children.
.outer {
margin-top: 10px;
overflow: hidden;
}
这篇关于Chrome中的奇怪渲染问题，浮动广告位于带边距顶部的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
