前端页面兼容性问题总结

来源：互联网发布：js protocol buffer 编辑：程序博客网时间：2024/04/28 10:31

前端兼容性问题总结

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

1 0