浏览器兼容性问题

Posted 2020-10-20 蔚京霖

1.浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里    *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

2.浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

3. ie6.0横向margin加倍

产生因素：块属性、float、有横向margin。

解决方法：display：inline；

4 一个父标签与几个子标签嵌套，父标签不浮动，子标签float，子标签不撑开父的高度。

解决方法：a 在子标签最后清浮动{<div style="height:0;clear:both;">&nbsp;</div>}

                  b 父标签添加{overflow：hidden；}

                  c 给父标签设置高度

5.两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值。

6. 优先级：被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!important不起作用。

7.火狐不识别background-position-y 或background-position-x;