浏览器兼容性问题

所谓的浏览器兼容性问题，是指由于不一样的浏览器对同一段代码有不一样的解析，形成页面显示效果不统一的状况。在大多数状况下，咱们的需求是，不管用户用什么浏览器来查看咱们的网站或者登录咱们的系统，都应该是统一的显示效果。因此浏览器的兼容性问题是前端开发人员常常会碰到和必需要解决的问题。

浏览器兼容问题一：不一样浏览器的标签默认的外补丁和内补丁不一样

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

碰到频率:100%

解决方案：CSS里    *{margin:0;padding:0;}

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

浏览器兼容问题二：块属性标签float后，又有横行的margin状况下，在IE6显示margin比设置的大

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

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

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

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

浏览器兼容问题三：设置较小高度标签（通常小于10px），在IE6，IE7，遨游中高度超出本身设置高度

问题症状：IE六、7和遨游里这个标签的高度不受控制，超出本身设置的高度

碰到频率：60%

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

备注：这种状况通常出如今咱们设置小圆角背景的标签里。出现这个问题的缘由是IE8以前的浏览器都会给标签一个最小默认的行高的高度。即便你的标签是空的，这个标签的高度仍是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的状况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到概率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，咱们须要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具备了块属性float后的横向margin的bug。不过由于它自己就是行内属性标签，因此咱们再加上display:inline的话，它的高宽就不可设了。这时候咱们还须要在display:inline后面加入display:talbe。

 

默认的内外边距不一样

问题：

各个浏览器默认的内外边距不一样

解决方案：*{margin:0;padding:0;}

水平居中的问题

问题：

设置 text-align: center  

ie6-7文本居中，嵌套的块元素也会居中

ff /opera /safari /ie8文本会居中，嵌套块不会居中

解决方案：

块元素设置

一、margin-left:auto;margin-right:auto

二、margin:0 auto;

三、<div align=”center”></div>