Css 保证金行为；溢出：隐藏"；webkit上浮动div之后的div_Css_Webkit

Css 保证金行为；溢出：隐藏"；webkit上浮动div之后的div

css

Css 保证金行为；溢出：隐藏"；webkit上浮动div之后的div,css,webkit,Css,Webkit,我发现“float:left”div后面的“overflow:hidden”div右边的边距增加了一倍。这可以通过以下代码进行测试： <!DOCTYPE html> <html> <head> <style type="text/css"> div.intro { border: 1px solid #DBDBDB; margin: 10px 0; padding: 10px 0; } div.intro>div {

我发现“float:left”div后面的“overflow:hidden”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>


部门简介{
边框：1px实心#dbdb；
利润率：10px0；
填充：10px0；
}
div.intro>div{
边框：1px实心#dbdb；
高度：150像素；
利润率：0.10px；
}
部门简介{
浮动：左；
宽度：150px；
}
分区列表{
溢出：隐藏；
}

在chrome（17.0.963.56米）和safari（5.1.2）中，div.list的右边框和div.intro的右边框之间的空间是20px，而在Firefox（11.0）和IE9中是10px

这是webkit的一个bug还是css的一个未定义的首选项

谢谢

17.0.963.56，我在Chrome for Mac上重现了这一点

这个问题源于您给了

#brief

和

#list

一个高度，但没有包含浮动。实际上并没有双边际；

10px

的

margin right

与

.intro

的10px

padding right

相结合，给出了

20px

双边距的暗示

综上所述，WebKit（Chrome和Safari的渲染器）以这种方式渲染的事实有点奇怪

使用此CSS（），一切都按预期进行：

只要浮动元素的宽度是静态和可预测的（因为非浮动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 */
}

这有效地设置了

div.list

的

左边距：0

，同时为浮动div提供了动态宽度。不幸的是，我还无法在Chrome 19b中测试这一点，所以我不确定它将如何处理这一问题。

我在这里测试的是Windows 7 32位，最新版本的Chrome和Safari，一切都很好，真奇怪！我在几台电脑（包括mac电脑）上再次测试过，div.list在chrome（17.0.963.56米）和safari（5.1.2米）上确实有两倍的右边距。但在测试版Chrome19中，这个问题并不存在@BramVanroy你能试试这个版本吗？谢谢chrome 17.0.963.79也有同样的问题，谢谢您的解释。你说“10px的边距右边与.intro的10px填充右边相结合”，我猜实际上是“与.brief的边距右边相结合”，对吗？谢谢你的解决方案。似乎直接添加

左边距：0到div.list不会影响FF和其他文件中的布局。
.div.list {
    overflow: hidden;
    -webkit-margin-start: 0px !important; /* you can ditch the 'important' by adding 'div.intro' to the front of your selector */
}