浏览器兼容问题

目录

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

2.图片加a标签在IE9中会有边框

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

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

5.a标签蓝色边框

6.IE6不支持min-height属性

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

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

9.cursor兼容问题

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

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

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

13.a标签css状态的顺序

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

15.ul标签在firefox中默认是有padding值的，而在IE中只有margin有值

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

17.ul或li浮动后，显示在div外

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

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

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

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

---

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

*{
    margin:0;
    padding:0;
}

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

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

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

9.cursor兼容问题

统一使用
{
    cursor:pointer;
}

10.IE6/IE7中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:inline;
}
li{
    list-style-position:outside;
}

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

li{
    display:inline;
}

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

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

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

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