浏览器兼容问题及解决方案

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

　　浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。常见的浏览器内核代表有五种，分别是Trident、Gecko、Blink、Webkit、Presto 。他们代表的浏览器是：

Trident:IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器；

Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行；

Webkit :代表作品Safari、Chrome ，是一个开源项目；

Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎；

Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

　　下面介绍一些常见的浏览器兼容问题及解决方案。

1、不同浏览器的标签默认的外补丁和内补丁不同

解决方案： css 里增加通配符 * { margin: 0; padding: 0; }。

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

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

4、图片默认有间距

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

5、IE9一下浏览器不能使用opacity

解决方案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持

解决方案：统一使用 cursor:pointer。

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position:relative。

还有一种解决方法就是CSS HACK的方法。

首先需要知道的是：

所有浏览器通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;

使用IE专用的条件注释

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

以下两种方法几乎能解决现今所有兼容.

1, !important (不是很推荐，用下面的一种感觉最安全)

随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

代码:
<style>
#wrapper {
100px!important; /* IE7+FF */
80px; /* IE6 */
}
</style>

2, IE6/IE77对FireFox <from 针对firefoxie6 ie7的css样式>

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html又为 IE7特有标签.

代码:
<style>
#wrapper { 120px; } /* FireFox */
*html #wrapper { 80px;} /* ie6 fixed */
*+html #wrapper { 60px;} /* ie7 fixed, 注意顺序 */
</style>

注意:
*+html 对IE7的兼容必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，

关于 clear float 的原理可参见 [How ToClear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

代码:
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

上面就是一些浏览器问题及其解决方法，希望可以帮到你！