Question

看看这个例子：

http://jsfiddle.net/nvcode/BnGyu/2/

现在显而易见的是，当第一个div完全填满时，浏览器可以正确计算宽度，但在第二个div上，我放置了98％的宽度和1％填充两侧，总计100％。

浏览器知道100％是父级的全宽，那么为什么子div不填充父级的空间？

即使你改变了宽度的值，它还会破坏更多？

Answer 1

默认情况下，任何块级元素都会展开以填充其包含元素的宽度。在这种情况下，指定内部元素的宽度是多余的。通常，对布局使用显式指标而不是百分比会更好（并且更少混淆）。

This sums it up nicely.

Answer 2

@nvcode;第一件事div是一个block元素＆amp; block元素默认为parent的全宽。所以，如果你给它padding & margin不影响结构。但是你定义width:100%＆amp;的某些原因想要padding，那么你可以使用box-sizing: border-box属性。

div{
        width:100%;
        padding-left:2%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}

检查此http://www.quirksmode.org/css/box.html

但它在IE7中不起作用。

所有浏览器中的CSS百分比宽度和百分比填充错误？

2 个答案: