Web前端中常见的浏览器兼容问题有哪些？

在web前端开发中，浏览器的兼容问题是我们经常会碰到和必须要解决的问题。所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

　　常见的浏览器兼容问题有以下内容：

　　问题1：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

　　问题描述：块状元素被添加float属性后，在IE6显示横行margin值加倍。

　　解决方法：在float的标签样式控制中加入 display:inline;将其转化为行内属性。

　　问题2：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

　　问题描述：IE6、7和遨游里标签的高度不受控制，原因是超出自己设置的高度

　　解决方法：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

　　问题3：：图片默认有间距

　　问题描述：因为在多个img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。

　　解决方法：使用float进行浮动。

　　问题4：Ie6下，不识别最大宽、高度和最小宽高度，意即min-width/height和 Max-width/height在ie6中没效果

　　问题描述：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容IE6、7和遨游里标签的高度不受控制，原因是超出自己设置的高度

　　解决方法：有以下两种解决方法

　　第一种：

　　1 .abc{

　　2 border:1px blue solid;

　　3 width:200px;

　　4 height:200px;

　　5 }

　　6

　　7 html>body .abc{

　　8 width:auto;

　　9 height:auto;

　　10 min-width:200px;

　　11 min-height:200px;

　　12 }

　　第二种：

　　1 .abc{

　　2 width:200px;

　　3 height:200px;

　　4 _width:200px;

　　5 _height:200px;

　　6 }

　　问题5：不同浏览器默认的margin值和padding值不同

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

　　解决方法：在CSS中使用通配符选择器重置样式

　　1 *{

　　2 margin:0;

　　3 padding:0;

　　4 }

来源：博客园