ie浏览器的兼容问题

一、IE6双倍边距bug

当页面上的元素使用float浮动时，不管是向左还是向右浮动；只要该元素带有margin像素都会使该值乘以2，例如“margin-left:10px” 在IE6中，该值就会被解析为20px。想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG

二、IE6中3像素问题及解决办法

当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部，当设定高度后又跑到容器的相反侧了。要解决这类BUG的话，需要使布局在同一行的元素都加上float浮动。

三、IE6中奇数宽高的BUG

IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其中要问题是出在奇数高宽上。要解决此类问题，只需要尽量将外部定位的div高宽写成偶数即可。

四、IE6中图片链接的下方有间隙

IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。要解决此类问题，需要将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0

五、IE6下空元素的高度BUG

如果一个元素中没有任何内容，当在样式中为这个元素设置了0-19px之间的高度时。此元素的高度始终为19px。

解决的方法有四种:

1.在元素的css中加入：overflow:hidden

2.在元素中插入html注释：<!– >

3.在元素中插入html的空白符： 

4.在元素的css中加入：font-size:0

六、重复文字的BUG

在某些比较复杂的排版中，有时候浮动元素的最后一些字符会出现在clear清除元素的下面。

解决方法如下：

1.确保元素都带有display:inline

2.在最后一个元素上使用“margin-right:-3px

3.为浮动元素的最后一个条目加上条件注释，<!–[if !IE]>xxx<![endif]–>

4.在容器的最后元素使用一个空白的div，为这个div指定不超过容器的宽度。

七、IE6中 z-index失效

具体BUG为，元素的父级元素设置的z-index为1，那么其子级元素再设置z-index时会失效，其层级会继承父级元素的设置，造成某些层级调整上的BUG。详细解释可以阅读IE6中部分情况下z-index无效的原因，以及解决办法

结语：实际上IE6中，很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。因此我们在书写代码时要记住，一旦使用了float浮动，就为元素增加一个display:inline样式，可以有效的避免浮动造成的样式错乱问题。使用空DIV时，为了避免其高度影响布局美观，也可以为其加上font-size:0 这样就很容易避免一些兼容上的问题。
兼容
1li列表的bug
/A当父元素li有float子元素a没有设置浮动时会出现垂直bug
hank：给父元素li和子元素都设置浮动/
/B当li中的a转成block并且有height并有float的li中设置浮动会出现阶梯显示
 hank：给li加float/
2marginBUG
/A：描述：当前元素与父元素没有设置浮动情况下设置margin-top会出现错误的加在父元素上
hank：给父元素和子元素加overflow：hidden
hank：给父元素和子元素加浮动/
/B：描述：当上下排列的元素上元素有margin-bottom：30px下元素有margin-top：20px他们
中间的间距不会叠加而是会设置较大的值
hank：把margin值加在一个元素上
hank：给上或下元素套一个div给div加overflow：hidden/
3按钮元素默认大小不一
/各个浏览器中按钮元素大小不一
hank1：统一大小（用a标签模拟）
hank2：input外面套一个标签在这个标签里直接写按钮的样式把input边框去掉
hank3：如果这个按钮是一个图片直接把图片作为按钮背景即可/
4.百分比的bug
/百分比bug在ie6及更低版本浏览器解析百分比时会按照四舍五入导致50%+50%》100%
hank：给右边的浮动元素添加声明clear：right/
5.表单元素行高对齐不一致
/form里的input select表单元素的行高对齐方式不一致
 hank：给表单元素加float：left/
6.高度自适应出现高度塌陷
 hank1：给父级元素添加声明overflow:hidden
 hank2:在浮动元素下方添加空的div病添加声明div{clear:both;height:0;overflow:hidden}
hank3:万能清除法ie6不支持div:after{content:".";clear:both;display:block;
height:0;overflow:hidden;visibility:hidden;}
7.块级元素默认高度
/描述：在ie6及以下版本中部分块元素拥有默认高度（小于20px在16px左右）
hank：给元素添加声明：font-size：0
hank：给元素添加声明：overflow：hidden/
8.鼠标指针
/描述：cursor属性的hand值只有在ie9以上识别其他浏览器不支持cursor的pointer属性只有
在ie6以上版本及其他内核浏览器都支持
hank：统一鼠标元素鼠标指针形状为手型cursor：pointer/
9.双倍边距
/当ie6及更低版本浏览器解析浮动元素时会错误把浮向边边界margin加倍显示
hank：给浮动元素添加声明display：inline/
10透明度的兼容
div{opacity:0.5;filter:alpha(opacity=50)}
11.图片的间隙
    img{display: block;}
       /在div中的图片间隙/ 
       /在div中的图片会在div下方撑大3px
        hank1：div和img写在一行上
         hank2：img转成块元素给img添加display：block
       图片水平居中不起作用加margin：0 auto/
       /dt li 中的图片间隙/
     /img添加display：block/
12图片有边框
img{border:0;}
/当图片加在a标签上时会出现边框
 hank：给图片加border：0或border：none/
13.最小高度自适应的兼容
/min-height属性ie浏览器不识别
hank1：min-height：100px；_height：100px
hank2：min-height：100px；height：auto！important；height：100px/
原文摘要