CSS浏览器兼容问题总结

时间:2023-03-09 00:21:22
CSS浏览器兼容问题总结

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

由于各大主流浏览器是不同的厂家开发的,所以使用的核心也不相同,架构代码很难重合,就会产生各种各样的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)im*生的间距

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;