关于浏览器兼容问题

浏览器兼容问题主要是由各个浏览器内核不同导致的

1.不同浏览器的标签的内外边距不同

解决方案

*{margin：0:padding：0；}

也可以引用别人写好的成熟插件Normalize.css来清除默认样式

2.图片加a标签在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；_height:350px;}

7.IE9以下六拉你去不能使用opacity

Firefox/chrome/safari/opera/浏览器使用opacity，IE浏览器使用filter

black

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>

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

ul{display：inline},

li{list-style-position:outside}

19.div嵌套p时，出现空白行

li{display:inline}

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

{line-height:1px}或{overflow:hidden}

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

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