box的宽度=margin*2 + padding*2 + boder*2 + width
但是IE5及以下版本浏览器不会按这个方法计算box的宽度,而是把padding和boder的值计算到width里(等于是忽略了),如右图所示
box的宽度=margin*2 + width
影响:
如果为有这样问题的IE5和没有这样问题的浏览器都指定一个宽度(width属性),那么IE5显示出来的box会比其它的小。
比如:一个div中一个图片的 width为100, padding*2=30(左右各15),border*2=10(左右各5),margin*2=20,那么按正常显示,容纳这个div的总宽度应该为160。应该显示成这么大一个框。
但是IE5里计算这个框时,大小只会计算出来width+margin*2=100+20=120; 显然这个框比预期的160小了40
解决的办法:给IE5的图片多加些值,如上例中要加40,即图片的width应设置为100+padding*2+border*2=100+40=140。
具体代码
* html .pullquote {
width: 140px;
w\idth: 100px;
}
其中,
* html .pullquote {
是IE6以及以下版本才会执行的代码。
w\idth: 100px;
是IE6才会执行(IE5不会执行)的代码,这儿计算问题只出现在IE5中,所以IE6要使用正常的计算值(这里是100)。
-----------------第一个问题完------------------
2. 有Border及backgroud颜色的元素,与float元素相遇时他们会穿越float的元素
解决方案:
第一步:把有border或backgroud的元素添加CSS属性为overflow: hidde;
这样会解决多数浏览器中的问题。但IE6以及以下版本还是会有问题。进一步解决办法:
第二步:在CSS中加入如下代码:
* html h2 { zoom: 1; }
3. 出来双倍margin的问题(The double-margin bug)
产生条件:当box是float:left,并且box中的元素设置了左边的边界,即margin-left值;或者float:right,且margin-right有值;(合起来就是float方向与margin设置方向相同)
影响:会重复一次margin,产生双倍margin.
影响范围:IE6以及以下版本。
解决办法:在CSS中加入如下html hack代码:
* html .sidebar { display: inline; }
4. 多余空白问题(IE 7 and earlier white space bug)