一 出现兼容性问题原因
所谓的浏览器兼容性问题,是指因为不同的浏览器使用的内核不同,所以对同一段代码有不同的解析,造成页面显示效果不统一的情况
二 各解决方案
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
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:inline;},
li{list-style-position:outside;}
19,div嵌套p时,出现空白行
p{display:inline;}
20,IE6默认div高度为一个字体显示的高度
{line-height:1px;}或{overflow:hidden;}
21,在Chrome中字体不能小于10px
p{font-size:12px;transform:scale(0.8);}
