IE6部分兼容问题

Posted 2020-06-17

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下浮动元素的父级有宽度就不用清浮动了
overflow IE6下不能包住浮动元素，也就是ie6下overflow 需要配合zoom：1
IE6下的双边距bug 在ie6下块元素有float和左右的margin，那么左右的margin会被放大2倍。
IE67下li间隙问题 ie6 7中的li本身没有浮动，但是li中的内容有浮动，li的下边就会产生几像素的间隙。 解决办法：内容有浮动，那么给li也加浮动；给li加vertical-align：top或是其它属性值。
IE6 下的body 和html是没有高度的，所以需要加上 body，html｛height：100%｝
IEtester 是不支持滤镜的，ie浏览器是支持的
position:relative IE6下默认父级可以包住比自己大的子级(二者是没有定位的情况)，而其他浏览器是包不住的，会产生溢出。解决办法overflow:hidden，但是加了overflow：hidden；IE6的父级是包不住子级的相对定位。解决办法：给父级也加上定位（相对、绝对都可以）。
position:relative IE6下默认父级可以包住比自己大的子级(二者是没有定位的情况)，而其他浏览器是包不住的，会产生溢出。解决办法overflow:hidden，但是加了overflow：hidden；IE6的父级是包不住子级的相对定位。解决办法：给父级也加上定位（相对、绝对都可以）。
IE6下form与form之间是有边距的，解决办法：样式重置。
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、为父元素或者子元素声明绝对定位