“溢出：隐藏”的边缘行为div在webkit上浮动div [英] Margin behavior of "overflow:hidden" div after floating div on webkit
问题描述
我发现在float：leftdiv之后的一个overflow：hiddendiv在右边加倍了边距。这可以用以下代码测试：
I've found that an "overflow:hidden" div following a "float:left" div has doubled margin on the right. This can be tested with following code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.intro {
border: 1px solid #DBDBDB;
margin: 10px 0;
padding: 10px 0;
}
div.intro>div {
border: 1px solid #DBDBDB;
height: 150px;
margin: 0 10px;
}
div.brief {
float: left;
width: 150px;
}
div.list {
overflow: hidden;
}
</style>
</head>
<body>
<div class="intro">
<div class="brief"></div>
<div class="list"></div>
</div>
</body>
</html>
div.list右边框和div.intro右边框之间的空格为20px 17.0.963.56 m）和safari（5.1.2），而在Firefox（11.0）和IE9中为10px。
The space between right border of div.list and right border of div.intro is 20px in chrome(17.0.963.56 m) and safari(5.1.2), while being 10px in Firefox(11.0) and IE9.
这是webkit的错误还是一个未定义的偏好of css？
Is this a bug of webkit or just an undefined preference of css?
谢谢！
推荐答案
这个问题来源于你给予 #brief 和 #list 一个高度，但没有包含浮点。实际上没有双边际; 10px 与 .intro 组合使用。 margin-right '10px padding-right 来表示 20px 双边距。
The problem stems from the fact you've given #brief and #list a height, but haven't contained the float. There actually isn't a double margin; the margin-right of 10px is combining with .intro's 10px padding-right to give the allusion of a 20px double-margin.
考虑到所有因素，WebKit（Chrome和Safari的渲染器）以这种方式呈现的事实有点奇怪。
All things considered, the fact the WebKit (Chrome's & Safari's renderer), rendered things that way is a little strange.
一切正常如预期的CSS（看到小提琴）：
Everything worked as expected with this CSS (see the Fiddle):
.intro {
margin: 0 0 20px;
padding: 20px;
background: #FFA;
overflow: auto;
height: 100%;
}
.brief {
background: rgba(255, 0, 0, 0.25);
width: 150px;
float: left;
}
.list {
background: rgba(0, 0, 255, 0.25);
margin: 0 0 0 170px;
}
这篇关于“溢出：隐藏”的边缘行为div在webkit上浮动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
