常见浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案

1、不同浏览器的标签默认的margin和padding不同

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

碰到频率:100%

解决方案：

CSS里加一行

*{margin:0;padding:0;}

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

2、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大，也就是float浮动造成IE6下面双边距的问题，IE6会错误的把浮动方向的margin值双倍计算

问题症状:常见症状是ie6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）

解决方案：(1)避免同时使用；

(2)在float的标签样式控制中加入 display:inline;将其转化为行内属性

(3)用!important

备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

[b]3、图片默认有间距[/b]

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

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

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

4、标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

5、浮动和未浮动的元素在同一行，左边的元素左浮，右边采用外补丁的右边框来定位的话，右边元素内的文本会离左边元素3px的间距，这也是IE6下一个经典的bug！

解决方案就是给左边的元素加上margin-right:-3px;

#outer{ float:left; width:800px;}

#one{ float:left; width:50%;}

#two{width:50%;}

*html#left{margin-right:-3px;}

6、在IE6下img垂直居中会出现多余的5px的空白！

解决方案：(1)将img转为块级元素；

(2)设img的父级的font-size:0px;

(3)改变父级的属性，设定宽高，然后overflow:hidden;

(4)给img浮动！

7、在IE6下不支持png的透明格式！

解决方案：

.pngbackground{
background:url(your.png);
_background: none;
_filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your.png',sizingMethod='scale');
}

8、在img外面有a包着的时候，在IE6下，img会出现border！

解决方案：在样式表中加上border：0；

9、很多滴孩纸习惯用clear空标签清浮动，在IE6中空标签会被自动的被解析成一段空白，也就是会有默认的行高！
解决方案：设置空标签的height:0; overflow:hidden;

10、hover在其他的浏览器中是支持全部标签的，但是在IE6中只支持a标签！

解决方案：合理的用a标签去嵌套其他的标签！

11、在IE6中，table标签中的border-color是无效的！

12、在IE6中，如果给li设置了宽高，li里面的元素同时浮动了，那么li之间就会有间距！

解决方案：(1)给li不设宽高；

(1)里面的元素不要浮动！

13、行内元素为包含框，如果包含的绝对定位元素以百分比为单位进行定位，里面的布局会混乱！

解决方案：给行内元素加入：zoom:1；触发IE6中hasLayout！

14、透明rgba与opacity；

解决方案：使用IE6当中的filter滤镜替换掉，opacity:0.6;filter:alpha(opacity:60);

15、小手效果cursor:pointer;Firefox支持，IE6不支持！

解决方案：两种都写cursor:pointer;cursor：hand；