为什么会出现浏览器兼容问题?
由于各大主流浏览器是不同的厂家开发的,所以使用的核心也不相同,架构代码很难重合,就会产生各种各样的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;