常见浏览器兼容性问题

378 阅读1分钟

概念

不同的浏览器对同一段代码解析不同造成浏览器显示效果不同,我们把这样的问题叫做浏览器兼容性问题

1.双倍浮动的bug

描述:块元素float后,又设置了横向的margin值,在IE6下显示的margin值比设置的值要大,并且是2倍关系 解决方案:给float的块元素添加display:inline;

2.表单元素行高不一致 解决方案: a) 给表单元素添加一致的vertical-align属性值 b) 给表单元素添加一致的float属性值

3.在IE6中,不能识别较小高度的容器(一般为20px) 解决方案:元素{height:1px; overflow:hidden;}

4.a标签里嵌套img时,有些浏览器(例如IE浏览器)下会出现有颜色的边框 解决方案 img{border:0;} 或 img{border:none;}

5.在IE6中不能识别min-height属性 解决方案: min-height:100px; _height:100px;

6.图片默认有空隙 解决方案:

a) img{display:block;}
b) img{float:left;}
c) img{vertical-align:bottom;}

7.IE8及以下浏览器不能识别opacity属性 解决方案:

{
	opacity:0.5;
	filter:alpha(opacity=50);
}

8.鼠标指针bug 描述:cursor:hand;只有IE8及以下浏览器识别,其他浏览器不识别 解决方案: 设置为 cursor:pointer; 所有浏览器都识别,将鼠标指针设置为手的形状 9.百分比bug 描述:在IE6下,子元素百分之五十加百分之五十大于父元素设置的百分之百