作者：阿捷 2004-7-22 22:37:07

本文来自：tantek.com，也可以阅读《网站重构》第225-235页了解更多。

郭爽注：简单的说就是 ie 的width是包含padding+border的最大宽度；而mozilla 指的是不包含这些的纯内容区的宽度。

我们定义一个最基本的层：

boxtest

div.boxtest{

border:20px solid #60A179;

padding: 30px;

background : #ffc;

width : 400px;

}

标准情况下，这个盒的宽度是:20+30+300+30+20=400px。

但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它认为300 px是整个盒的总宽度，内容的宽度变成：300-20-30-20-30=200px。

为了弥补这个bug，采用一个技巧：即增加一个IE5不能解释的声音属性”voice-family”,读到这个定义时浏览器就不再继续阅读，认为宽就是400px，但而其他符合标准的浏览器会继续阅读，并执行第二个真实值300px。

content

div.content{

border:20px solid #60A179;;

padding:30px;

background: #ffc;

width :400px;

voice-family : “”}”";

voice-family :inherit;

width : 300px;

}

同样，在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值，有更简单的办法解决这个问题： html>body .content { width :300; }

郭爽注：voice 方法不行，还是 html>body 这个可行，代码如下：在两种浏览器中宽度显示一致

[align=right][size=1][color=#cccccc][Edit on 2004-8-3 15:57:14 By guoshuang][/color][/size][/align]