最全整理浏览器兼容性问题与解决方案.docx

最全整理浏览器兼容性问题与解决方案.docx

《最全整理浏览器兼容性问题与解决方案.docx》由会员分享，可在线阅读，更多相关《最全整理浏览器兼容性问题与解决方案.docx（45页珍藏版）》请在冰豆网上搜索。

最全整理浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案

　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

　　在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

　　第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

　　第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。

某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。

稍有改动就乱七八糟。

代码为什么这么写还不知所以然。

这类开发人员往往经常为兼容性问题所困。

修改好了这个浏览器又乱了另一个浏览器。

改来改去也毫无头绪。

其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

　　文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。

　　浏览器兼容问题一：

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

W.SVP.ZU%9

　　问题症状：

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

　　碰到频率:

100%

　　解决方案：

CSS里   *

　　备注：

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

　　浏览器兼容问题二：

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

　　问题症状:

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

　　碰到频率：

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

　　解决方案：

在float的标签样式控制中加入display:

inline;将其转化为行内属性

　　备注：

我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用divfloat实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

　　浏览器兼容问题三：

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

　　问题症状：

IE6、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。

　　浏览器兼容问题五：

图片默认有间距

　　问题症状：

几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

　　碰到几率：

20%

　　解决方案：

使用float属性为img布局

　　备注：

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

去掉这个间距使用float是正道。

（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

　　浏览器兼容问题六：

标签最低高度设置min-height不兼容

　　问题症状：

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

　　碰到几率：

5%

　　解决方案：

如果我们要设置一个标签的最小高度200px，需要进行的设置为：

{min-height:

200px;height:

auto!

ImportAnt;height:

200px;overflow:

visible;}

　　备注：

在B/S系统前端开时，有很多情况下我们又这种需求。

当内容小于一个值（如300px）时。

容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。

这时候我们就会面临这个兼容性问题。

　　浏览器兼容问题七：

透明度的兼容CSS设置

　　做兼容页面的方法是：

每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。

建议经常会碰到兼容性问题的新手使用。

很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。

如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

1./* CSS hack*/ 

我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。

不过hacker还是非常好用的。

使用hacker我可以把浏览器分为3类：

IE6；IE7和遨游；其他（IE8ChromeffSafariopera等）

　　◆IE6认识的hacker是下划线_和星号*

　　◆IE7遨游认识的hacker是星号*

　　比如这样一个CSS设置：

1.height:

300px;*height:

200px;_height:

100px; 

　　IE6浏览器在读到height:

300px的时候会认为高时300px；继续往下读，他也认识*heihgt，所以当IE6读到*height:

200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。

继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。

当它们读到*height200px的时候就停下了，因为它们不认识_height。

所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:

300px;所以他们会把高度解析为300px。

因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIVCSS设计的网，就应该更注意IE6IE7FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！

所有浏览器通用

height:

100px;

IE6专用

_height:

100px;

IE6专用

*height:

100px;

IE7专用

*+height:

100px;

IE7、FF共用

height:

100px!

important;

一、CSS兼容

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

1,!

important（不是很推荐，用下面的一种感觉最安全）

随着IE7对!

important的支持,!

important方法现在只针对IE6的兼容.（注意写法.记得该声明位置需要提前.）

代码:

2,IE6/IE77对FireFox

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

代码:

注意:

*+html对IE7的兼容必须保证HTML顶部有如下声明：

代码:

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"　".w3.org/TR/html4/loose.dtd">

二、万能float闭合（非常重要!

）可以用这个解决多个div对齐时的间距不对，

关于clearfloat的原理可参见[HowToClearFloatsWithoutStructuralMarkup]

将以下代码加入GlobalCSS中,给需要闭合的div加上class=”clearfix”即可,屡试不爽.

代码:

***********************************************************************************************************************

三、其他兼容技巧（相当有用）

1,FF下给div设置padding后会导致width和height增加,但IE不会.（可用!

important解决）

2,居中问题.

1）.垂直居中.将line-height设置为当前div相同的高度,再通过vetical-align:

middle.（注意内容不要换行.）

2）.水平居中.margin:

0auto;（当然不是万能）

3,若需给a标签内内容加上样式,需要设置display:

block;（常见于导航标签）

4,FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加倍等问题.

5,ul标签在FF下面默认有list-style和padding.最好事先声明,以避免不必要的麻烦.（常见于导航标签和内容列表）

6,作为外部wrapper的div不要定死高度,最好还加上overflow:

hidden.以达到高度自适应.

7,关于手形光标.cursor:

pointer.而hand只适用于IE.贴上代码:

兼容代码:

兼容最推荐的模式。

/*FF*/

.submitbutton{

float:

left;

width:

40px;

height:

57px;

margin-top:

24px;

margin-right:

12px;

}

/*IE6*/

*html.submitbutton{

margin-top:

21px;

}

/*IE7*/

*+html.submitbutton{

margin-top:

21px;

}

什么是浏览器兼容：

当我们使用不同的浏览器（FirefoxIE7IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。

而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。

这下就和谐了。

呵呵！

最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽然IE7已经走向标准化，但还是有许多和FF不同的地方，所以需要用到IE7的兼容，有许多朋友问过IE7的兼容是什么，其实我也不知道。

暂时还没找到IE7专用的兼容。

除了前面那片文章，《针对firefoxie6ie7的css样式》中的兼容方式也是很好用的。

有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用，下面介绍三个兼容，例如：

（适合新手，呵呵，高手就在这里路过吧。

）

程序代码

第一个兼容，IEFF所有浏览器公用（其实也不算是兼容）

height:

100px;

第二个兼容IE6专用

_height:

100px;

第三个兼容IE6IE7公用

*height:

100px;

介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别给一个属性定义IE6IE7FF专用的兼容，看下面的代码，顺序不能错哦：

程序代码

height:

100px;

*height:

120px;

_height:

150px;

下面我简单解释一下各浏览器怎样理解这三个属性：

在FF下，第2、3个属性FF不认识，所以它读的是height:

100px;

在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性*height:

120px;

在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。

1针对firefoxie6ie7的css样式

现在大部分都是用!

important来兼容，对于ie6和firefox测试可以正常显示，但是ie7对!

important可以正确解释，会导致页面没按要求显示！

找到一个针对IE7不错的兼容方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：

#1{color:

#333;}/*Moz*/

*html#1{color:

#666;}/*IE6*/

*+html#1{color:

#999;}/*IE*/

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2css布局中的居中问题

主要的样式定义如下：

body{TEXT-ALIGN:

center;}

#center{MARGIN-RIGHT:

auto;MARGIN-LEFT:

auto;}

说明：

首先在父级元素定义TEXT-ALIGN:

center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。

解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:

auto;MARGIN-LEFT:

auto;”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT:

auto;MARGIN-LEFT:

auto;就可以了。

3盒模型不同解释.

#box{

width:

600px;

//forie6.0-w\idth:

500px;

//forff+ie6.0

}

#box{

width:

600px!

important

//forff

width:

600px;

//forff+ie6.0

width/**/:

500px;

//forie6.0-

}

4浮动ie产生的双倍距离

#box{float:

left;width:

100px;margin:

000100px;//这种情况之下IE会产生200px的距离display:

inline;//使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:

总是在新行上开始,高度,宽度,行高,边距都可以控制（块元素）;Inline元素的特点是:

和其他元素在同一行上,…不可控制（内嵌元素）;

#box{display:

block;//可以为内嵌元素模拟为块元素display:

inline;//实现同一行排列的的效果diplay:

table;

5IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。

这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。

要解决这个问题，可以这样：

#box{width:

80px;height:

35px;}html>body#box{width:

auto;height:

auto;min-width:

80px;min-height:

35px;}

6页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。

但IE不认得这个，而它实际上把width当做最小宽度来使。

为了让这一命令在IE上也能用，可以把一个