小结IE6的坑

1、z-index在position:relative/absolute等定位属性设置后还是无效，会导致top栏的导航栏目的子菜单被下面的层遮住，无法显示；
解决办法：？http://www.wufangbo.com/ie6-ie7-z-index-bug/
就是被子导航列表覆盖的层绝对不能设置为相对定位(在该层中想让其子元素设置为position:absolute;本层设置为position:relative;这样的组合在IE6中是绝对不允许的，解决办法是：去掉父层的position:relative;这个属性，修改其子元素定位为position:relative;即可，这样其父层就不会覆盖子导航列表了)

2、IE6对display:inline-block;属性支持的不全面，对内联元素支持的还可以，但对块状元素这样设置是无效的；
解决办法：
1、display:inline-block; _zoom:1;_display:inline;这样写才行。
2、将要弄成块状内联元素的div等标签换成内联元素span等，给span  display:inline-block;就行了。

3、IE6对png24图片的透明度支持的不好，只对png8的图片才支持其透明度，但是png8的图片品质太低，如果是文本的话
会出现边框锯齿，使得文本图片变得很难看；
解决办法：
用带背景的jgp图片代替，背景要与所在容器的背景一致即可。

4、IE6不支持圆角，圆角要用图片来表现出来，写样式时很麻烦，注意这个问题。

5、IE6不支持box-shadow这个阴影属性，要做阴影效果必须用滤镜，写法是：
box-shadow: 0px 2px 2px #BEBEBE;//这是标准浏览器css3的写法，下面是针对IE6的滤镜写法
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color='#999999');
注意：color属性千万不能写成#999,一定要写全，否则会导致阴影跑到左上角去。

6、IE6中的select框的边框总是保留默认蓝色，无法去除，且其边框也不能简单的用border:0;或border:none;去除
解决办法是：
在select框外包含一层div,去除select边框即可，div的边框颜色是可以设置的。
具体解决代码是：
□、先给select加一个div父包含块，设置这个父包含块边框颜色为你想要的颜色，如：border: 1px solid #d0dad8;再加上overflow:hidden;属性；表示溢出部分隐藏，其作用原理是：让select偏移-1px的距离，一旦偏移就会触发overflow:hidden;属性，使得select边框被隐藏掉，解决了select边框无法被去除的问题；
□、接着，按照上面的原理，给select加上margin:-1px;属性，刷新，看到select边框被隐藏掉了，只剩下父层div的边框，看上去是那么回事了；
□、但是还有一个小尾巴，select默认的右边框还是蓝色的，且显示在没有溢出的div父层内，这时的解决办法是，增大select的宽度width为102%;表示比父层宽，原理也是宽出的部分会被隐藏掉，至此，就完成了兼容IE6以上的select边框的问题
□、最后，要注意的是别再表格单元格内使用以上效果，因为这么做会遮盖掉单元格td的右边框。

下面是网上摘录IE6的坑，尽可能往多的说：

border-style：dotted 点线 IE6不兼容 （除了solid以外，其它都有兼容问题，不完全一样）
a IE6 不支持a以外的所有标签伪类，IE6以上版本支持所有标签的hover伪类。
inline-block IE6 7不支持块元素标签的inline-block
空标签清浮动 IE6 最小高度 19px；这是font-size=0后，IE6下还有2px偏差。通过设置overflow：hidden来隐藏设置高度以外的高度。
after伪类 IE 6 7不支持after伪类清除浮动，通过zoom或是宽高解决
IE6 7下浮动元素的父级有宽度就不用清浮动了
zoom firefox不支持，zoom可以触发ie中的haslayout=true，当父元素没有宽高时，通过zoom和after伪类来兼容各个浏览器。
overflow IE6下不能包住浮动元素，也就是ie6下overflow 需要配合zoom：1
float IE 6 7中需要并在同一行的所有元素都要加浮动，在其它浏览器中
<div>
<divid=’div1’></div>
<divid=’div2’>文字</div>
</div>
div2可以不加浮动，div1加浮动就可以了。但是ie67中文字环绕会有间隙，所有需要在div2上加浮动。
IE6下的双边距bug 在ie6下块元素有float和左右的margin，那么左右的margin会被放大2倍。
IE67下li间隙问题 ie6 7中的li本身没有浮动，但是li中的内容有浮动，li的下边就会产生几像素的间隙。 解决办法：内容有浮动，那么给li也加浮动；给li加vertical-align：top或是其它属性值。
img{border:none;vertical-align:top;} /*解决a标签下img在ie6下会出现边框，解决图片下的空隙问题*/
opacity IE8及以下的浏览器用filter：alpha（opacity=0-100）， 主流浏览器用opacity：0-1；
IE6 下的body 和html是没有高度的，所以需要加上 body，html｛height：100%｝
IEtester 是不支持滤镜的，ie浏览器是支持的。
position：fixed IE6不支持固定定位
position:relative

IE6下默认父级可以包住比自己大的子级(二者是没有定位的情况)，而其他浏览器是包不住的，会产生溢出。解决办法overflow:hidden，但是
加了overflow：hidden；IE6的父级是包不住子级的相对定位。解决办法：给父级也加上定位（相对、绝对都可以）。
position:absolute IE6下绝对定位的父级宽高都为奇数时，那么元素的top 和bottom都会有1px的误差。
<label></label>
label标签在如下情况IE6没有效果
<label><inputtype=’radio’>单选按钮的内容</input></label&
gt;。一般情况下点击文字和按钮都可以选中，但是ie6下点击文字没有效果。解决办法：<input type=’radio’
id=’a’><label
for=’a’>单选按钮的内容</label></input>,将label中的文字和按钮相关联。
<form></form> IE6下form与form之间是有边距的，解决办法：样式重置。
input 设置宽高，在各个浏览器效果不一样。通常不设置。
select 只能设置宽，高存在兼容问题，IE6下设置高没有效果。
IE6下 子元素可以撑爆父元素设置好的宽度，主流浏览器不可以，解决办法：测量时注意，不要让子元素宽高大于父元素的宽高。

IE6 下元素浮动，其宽度需要内容撑开，若内容是块元素，ie6下宽度撑开整行。解决办法：给里面的块元素也加上浮动。

IE67下 块元素想要一样显示，必须都加float，若是采用margin会产生3px的间隙。

P tdp等标签不可以嵌套块标签

IE6下最小高度问题
当ie6下元素高度小于19px时，会默认设置成19px，最好解决办法：给元素加上overflow：hidden；将多余的隐藏掉。还有种办法就是设置元素的font-size：0；但是效果不好仍然会有2px的误差，不建议使用。

ie6下border 1px dotted点线是虚线，2px就不会出现这样的情况。解决办法：切背景平铺。

如何避免子元素外边距传递问题

1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美,ie6下要触发haslayout加上zoom:1；
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1pxsolid transparent可用）,ie6下margin消失，需要触发haslayout 加上zoom:1；
5、为父元素或者子元素声明绝对定位