Question

我发现“float：left”div后面的“溢出：隐藏”div在右边有两倍的边距。这可以使用以下代码进行测试：

<!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.intro的右边框和div.intro的右边框之间的空格是chrome（17.0.963.56 m）和safari（5.1.2）中的20px，而Firefox（11.0）和IE9中是10px。

这是webkit的错误还是css的未定义偏好？

谢谢！

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

Answer 1

我能够在Chrome for Mac上重现这一点，17.0.963.56。

问题源于你给#brief和#list一个高度，但没有包含浮点数的事实。实际上没有双重保证金; margin-right 10px与.intro的10px padding-right合并，以暗示20px双边距。

考虑到所有因素，WebKit（Chrome和Safari的渲染器）渲染事物的方式有点奇怪。

这个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;
}

Answer 2

只要浮动元素的宽度是静态且可预测的（因为非浮动div的边距设置为跨越浮动div的宽度，加上两者之间所需的空间），上述解决方案似乎就可以解决问题。）。

但是，如果您正在使用具有动态宽度的浮动div，则可以针对具有-webkit-margin-start属性的Webkit特定问题进行定位，而所有其他浏览器都将忽略该属性：

.div.list {
    overflow: hidden;
    -webkit-margin-start: 0px !important; /* you can ditch the 'important' by adding 'div.intro' to the front of your selector */
}

这有效地仅在Webkit中设置div.list的{{1}}，同时为浮动div提供动态宽度。不幸的是，我还没能在Chrome 19b中测试这个，所以我不确定它将如何处理这个kludge。

在webkit上浮动div之后“溢出：隐藏”div的保证金行为

2 个答案: