CSS浏览器兼容问题总结

Posted 2020-08-02

为什么会出现浏览器兼容问题？

由于各大主流浏览器是不同的厂家开发的，所以使用的核心也不相同，架构代码很难重合，就会产生各种各样的bug。

IE6中常见的css解析bug

1）默认高度（IE6）部分块元素会拥有默认的高度

hack1：给元素添加声明：font-size：0；

hack2：给元素添加声明：overflow：hidden；

2）各浏览器的按钮大小不一样/边框显示不一样

hack：统一大小（宽和高）；

hack1:给input外边加一个标签，给标签加边框，再取消input的默认边框；

hack2：给背景图插入；

3）表单元素行高对齐方式不一致

hack：给表单元素添加统一的声明：float：left；

4）双倍浮动问题

hack：给浮动元素添加声明：display：inline；

5）img产生的间距

hack：font-size：0；

6)div中插入图片时，图片会将div下方撑大3像素

hack1：将</div>和<img>标签写在一行，中间没有空格；

hack2：将<img>装换成块元素,给<img>添加声明:display:block;

7)li里a加display：block或者float；会出现行高不一致，会把父元素高度撑大3像素左右

hack1：display：inline-block；

hack2：display：inline；

8）li里的图片间隙，在li里插入图片时，图片会把li下方撑大3像素

hack1：将<img>转为块元素，给<img>添加声明：display：block；

hack2：给img定一个声明margin-bottom：-5px；

hack3：将<li>设置高度，给<li>添加声明overflow：hidden；

 

《补充》

！important关键字过滤器

表示所附加的声明具有最高优先级的意思，但由于IE 6及更低版本不能识别它，则可以利用IE6这个bug作为过滤器。

取消超链接的虚拟框：outline：none；