你知道哪些浏览器兼容问题（浏览器兼容问题解决经验总结）

问题描述

随着互联网的大众化，人们的日常工作环境也渐渐的由传统转移到Web浏览器中，从而就使得我们必须编写大量的B/S模式的软件来满足人们日常的一些工作。作为一个开发人员，我们知道现在有很多的浏览器可以供人们来使用，由于这些浏览器并不是来自于一个组织或者机构（公司），特别是早期的一些浏览器版本，由于在很早的时候没有一个组织和机构来制定一套完善的技术规范，从而导致了每一个厂家的浏览器都不一样，乃至于即使是同一个厂家的浏览器不同的版本也存在着很大的差异，其中最典型的就是浏览器巨头之一的Microsoft Internet Explorer(以下简称IE)。正是由于这个原因所以在Web项目开发中各个不同种类不同版本（不同版本主要是指IE系列）的浏览器兼容问题就成为了一个让开发人员很头疼的问题。下面我讲列举出在Web项目中遇到的浏览器不兼容的问题以及解决办法。

定位过程CSS样式冲突

一个Web项目会写很多的CSS样式表来控制页面的展示，这些样式表有可能是由多个人写的，那么就难免不会保证写出来到 样式不会遇到冲突（这里所说的冲突是指多个当引入多个CSS样式表文件时，出现同名的或者同样的css样式，一个样式改变了另一个）。如下两个样式表：

解决思路：名称尽量做到见名知义，减少名称上的重复，将一些共有的CSS抽取到公用的CSS样式表中。利用这一 特性可以模拟实现类似Java中覆盖父类的效果。

CSS样式兼容问题

div极小的高度值设置[ie6]

发生条件：当div的高度小于某个值时，没有效果，

解决方法：这时要对div设置font-size:0；

双倍边 Bug[ie6]：

发生条件：float:left; margin-left:10px;两个同时出现时，margin-left会变成双倍。

解决方法：加一个display:inline；

3px Bug[ie6]：

发生条件：两个层都设有宽度，第一个float:left;第二个不设置float值，这时并排的两个层之间会出现3px的BUG

解决方法：

1、让第二层float:left;

2、让第二层*margin-right:-3px；

同时，第二个层不设置float:left的情况下，在ie6/ie7下这两个图层是并排的，而在ie8/ff下是各占一行的。

奇怪文字的复制[ie6]:

发生条件：当多个浮动的元素彼此跟随，中间加注释的时候，最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug。

解决方法：

1、不放置注释。最简单、最快捷的解决方法

2、注释不要放置于2个浮动的区块之间。

3、将文字区块包含在新的div之间

4、注释可以这样写：<!--[if !IE]>Put your commentary in here...<![endif]-->

表格不设定表格的列宽[FF 3.5.8]

发生条件：table[display:block;width:100%],如果这个表格的列宽不设定，则整个表格只会显示最小宽度，并没有显示100%。而在ie下正常显示。

解决方法：1、diplay不要设为block；

中文注释使CSS样式表失效[ie6]

样式表，不要出现中文的注释！！！

文字本身的大小不兼容

同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

ff下容器高度限定

即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

横向上的撑破容器问题

如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

看看这段案例。在不同浏览器下分别测试以下各项代码。

a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;width:10px”></div>

c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red;overflow:hidden”></div>

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。

mirror margin bug

当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

吞吃现象

还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

img下的留白

看这段代码有啥问题：

<div>

<img src=”” mce_src=”” />

</div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

<div>

<img src=”” mce_src=”” /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

失去line-height

<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。

解决方案：让img 和文字都 float起来。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

clear层应该单独使用

为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效

<div style=”background:red;float:left;”>dd</div>

<div style=”clear:both;margin-top:18px;background:green”>ff</div>

ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效

解决方案：给overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

ie6下严重的bug

float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。

ie6下的bug

绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。

解决方案：给内层相对层float属性。

width:100%这个东西在ie里用很方便

会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行。

有时候加上div{overflow:hidden}

这个样式那三个浏览器就会相同了

总结

出现浏览器兼容问题原因大体情况下可以分为文档结构不完整、css样式不兼容多版本浏览器以及浏览器自身出现的一些bug（以下称之为浏览器bug）。

使用DIV、CSS编写页面样式时，注意尽量使用兼容性强的属性，防止出现在不同版本浏览器中，导致样式不一致问题，同时在编写完CSS样式是，尽可能全面的在当前主流浏览器中进行测试。

在出现CSS样式在不同IE版本上出现兼容问题，写兼容的CSS样式也不起作用，可以考虑针对出现兼容性问题的浏览器版本，定制特定的CSS样式表，使用时可以用 " if lte IE 6 "或者 " if !gt IE 6"或者" if lt IE 7.0"或者" if !gte IE 7.0"或者" if lt IE 7"或者 " if !gte IE 7"; 或者" if !IE 7.0"或者" if !IE 7"，例如：

给IE7专门设计的样式：

<!--[if lte IE 7]>

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

<![endif]-->

给IE6专门设计的样式：

<!--[if lte IE 6]>

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

<![endif]-->

,