常见的浏览器兼容性问题

1.不同浏览器的标签默认的列外边距不同.

解决方法:

==>*{margin:0;padding:0}

==>也可选择应用别人写好的成熟插件Normalize.css来清除默认样式

2.图片加标签在IE9浏览器中会有边框

解决方法:

==>img{border:none;}

3.IE6及更低版本浮动元素,浮动边双倍边距

解决方法:

==>不使用margin,使用padding

4.IE6及更低版本中部分块级元素拥有默认高度

解决方法:

==>给元素设置font-size:0;

5.a标签蓝色边框

解决方法:

==>a{outline:none}

6.IE6不支持min-height属性

解决方法:

==>{min-height:200px;_heihgt:350px;}

7.IE9以下浏览器不能使用opacity

解决方法:

==>Firefox/Chrome/Safari/Opera浏览器使用opacity,IE浏览器使用filter

8.IE6/7不支持display:inline-block

解决方法:

==>{display:inline-block;*display:inline;}

9.cursor兼容问题

解决方法:

==>统一使用{cursor:pointer;}

10.IE6/7中img标签与文字放一起时line-height失效问题

解决方法:

==>文字和<img/>都设置float

11.table宽度固定,td自动换行

解决方法:

==>table设置{table-layout:fixed;} td设置{word-wrap:break-word;}

12.相邻元素设置margin边距时margin将取最大值,舍去小值

解决方法:

==>不让边距重叠可以给子元素加一个父元素,并给该父元素设置:{overflow:hidden;}

13.a标签css状态的顺序

解决方法:

==>按照link --> visited --> hover --> active 的顺序编写

14.IE6/7图片下面与空隙的问题

解决方法:

==>img{display:block;}

15.ul标签在Firefox中默认是有padding值得,而在IE中只有margin有值

解决方法:

==>ul{margin:0;padding:0}

16.IE中li指定高度后,出现排版错误

解决方法:

==>设置line-height

17.ul和li浮动后,显示在div外

解决方法:

==>清除浮动;须在ul标签后加<div style='clear:both'></div>来闭合外层div

18.ul设置float后,在IE中margin将变大

解决方法:

==>ul{display:none;} li{list-style-position:outside;}

19.li嵌套p时,出现空白行

解决方法:

==>li{display:inline;}

20.IE6默认div高度为一个字体显示的高度

解决方法:

==>{line-height:1px;}或{overflow:hidden;}

21.在Chrome中字体不能小于10px

解决方法:

==>p{font-size:12px;transform:scale(0.8);}