常见的浏览器兼容问题及解决方法

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

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

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

碰到频率:100%

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

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

浏览器兼容问题二：IE6/IE7对display:inline-block的支持欠缺

问题症状：

inline-block作用就是将块级元素以行的等式显示，用ul和li做的横向菜单，没有用float:left，而是将li设置display:inline-block，在主流浏览器中水平显示都没有问题，可是到ie6/ie7下就成垂直显示了。

css代码：

复制代码

1 #ul-menu{

2 　　margin:0;

3 　　padding:0;

4 　　list-style:none;

5 }

6 #ul-menu li{

7 　　inline-block;

8 　　margin-right:15px;

9 }

复制代码

html代码：



主流浏览器中显示正常：



ie6/ie7下垂直显示：



解决方法：

1 #ul-menu li{

2 　　display:inline-block;

3 　　_zoom:1;

4 　　*display:inline;

5 }

浏览器兼容问题三：IE6下浮动时margin双倍边距

问题症状：比如有一个div，其css为float:left，然后margin-left:20px,在主流浏览器中显示没有问题，但在ie6中则会出现双倍边距，即为40px。

css代码:

复制代码

1 #test{

2 　　width:100px;

3 　　height:100px;

4 　　background:#ccc;

5 　　float:left;

6 　　margin-left:20px;

7 }

复制代码

html代码：

1

主流浏览器中显示：



ie6中显示：



解决方法：

在对应的样式中加上display:inline，代码如下：

复制代码

1 #test{

2 　　width:100px;

3 　　height:100px;

4 　　background:#ccc;

5 　　float:left;

6 　　margin-left:20px;

7 　　display:inline;

8 }

浏览器兼容问题四：IE6/IE7显示垂直滚动条

1）表现描述

有时候页面就几个字，根本没有超出显示范围，IE6/IE7还会显示垂直滚动条。

2）解决方法

将html样式设置overflow属性，代码如下：

1 html{

2 　　overflow:auto;

3 }

浏览器兼容问题五：标签最低高度设置min-height不兼容

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

碰到几率：5%

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

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题六：居中布局 创建一个CSS定义把一个元素放到中间的位置，最简单的做法是为元素增加一个margin: auto; ，然而 IE 6.0 会出现很多奇怪的行为。

问题症状：

.div {

border: solid 1px #000;

background: #777;

width: 400px;

height: 160px;

margin: 30px 0 0 30px;

8b2c

}

.element{

background: #95CFEF;

border: solid 1px #36F;

width: 300px;

height: 100px;

margin: 30px auto;

}

主流浏览器中显示：



ie6中显示：



解决方案：这应该是IE 6对margin的 auto 并没有正确的设置。但幸运的是，这是很容易被修正的。 解决方法 最简单的方法是在父元素中使用 text-align: center 属性，而在子元素中使用 text-align: left 。

.div {

border: solid 1px #000;

background: #777;

width: 400px;

height: 160px;

margin: 30px 0 0 30px;

text-align: center;

}

.element{

background: #95CFEF;

border: solid 1px #36F;

width: 300px;

height: 100px;

margin: 30px auto;

text-align: left;

}