CSS浏览器兼容问题与方案

1. IE5以及以下版本不能正常计算出CSS Box的宽度。如下图所示，正常的计算应该如左图，
                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）