前端页面兼容性问题总结

前端兼容性问题总结

1.图片 img 标签，在IE浏览器下会有空白

    解决办法：display:block;

2. IE6 下父级没有宽高，不会触发haslayout。

    触发原因：子级浮动，父级没有宽高，overflow失效
    父级加 zoom:1;

3.躲猫猫

    触发原因：一个元素浮动了，同级的元素未浮动。clear:both; 元素有一个border。

    解决办法：都浮动

4. 双边距

    触发原因：margin-left float:left
    触发原因：margin-right float:right

    解决办法：display:inline

5.ie6 子级会撑开父级

    解决办法：父级overflow:hidden

6. ie6 行高失效

    触发原因：文字后有 inline-block 元素时触发

    解决办法：给 inline-block 元素加上 vertical-align:middle;
    解决办法：给 inline-block 元素加上 margin=(行高-input高)/2

7.margin 负值

    触发原因：ie6不能超出父级

    解决办法：子级身上加 position:relative;

8. IE6 最小高度 12px

    解决办法：overflow:hidden;
    解决办法：font-size:2px; 不靠谱
    chrome浏览器支持12PX字体大小

9. IE6 单像素bug

    解决办法：别用奇数

10. IE6 3像素bug

    触发原因：有一个元素浮动了，另一个元素未浮动

    解决办法：都浮动

11. li 下面默认的间距

    1.用浮动
    2.vertacal-align:top;

12. 最小宽度

    _width

13. ie6 注释bug

    触发原因：
    父级
    width:300px;
    margin:20px auto;
    overflow:hidden;

    子级：
    width:100%; 
    float:left;
    两个浮动的文本间有注释

    解决办法：浮动的元素 background:none;
    解决办法：去掉注释。

14. 双浮动bug

    触发原因：给浮动的元素身上加 绝对定位

    解决办法： 1.去掉绝对定位
              2.加上top/left