当然你会说,每个盒子的宽度不要设为 50%,可以设为 45%,然后为每个盒子再加一个 5% 的 padding,这是一个解决办法,但我们在设计中经常有这样的习惯,虽然一段内容的宽度可能不确定,但我们总喜欢它拥有固定 padding,我们并不希望 padding 自动适应,况且,在很多时候,我们希望为一个自适应宽度的盒子,设置一个 1 像素的 border,在这种情形,W3C 盒子模型将陷入困境。
而遇到这种情形,IE6 盒子模型不需要任何周折,你只管将每个盒子的宽度设置为 50%,它们会自动适应容器的宽度,然后,不管你你怎样设置 padding 和 border,都不会撑破你的容器。
W3C在盒子模型上迷途知返
虽然 W3C 永远都不会承认,但他们显然意识到了这个问题,重新定义盒子模型是不可能了,所以,在 CSS3 中,我们看到了下面这个属性:
box-sizing
box-sizing 有两个可选值,一个是默认的 content-box 一个是 border-box,选用后者,盒子模型将按 IE6 的方式进行处理。