风也温柔

计算机科学知识库

前端解决浏览器兼容 技术贴|浏览器兼容问题解决经验总结

  问题描述

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

  定位过程CSS样式冲突

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

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

  CSS样式兼容问题

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

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

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

  双倍边 Bug[ie6]:

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

  前端兼容优化_前端解决浏览器兼容_兼容ie7的前端框架

  解决方法:加一个:;

  3px Bug[ie6]:

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

  解决方法:

  1、让第二层float:left;

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

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

  奇怪文字的复制[ie6]:

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

  解决方法:

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

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

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

  4、注释可以这样写:

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

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

  解决方法:1、不要设为block;

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

  样式表,不要出现中文的注释!!!

  文字本身的大小不兼容

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

  ff下容器高度限定

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

  横向上的撑破容器问题

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

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

  前端兼容优化_前端解决浏览器兼容_兼容ie7的前端框架

  a. b.

  c. d.

  上面的代码在不同浏览器中是不一样的,实验起源于对小 值div 的运用,,小 值要配合:一起使用。实验好玩而已,想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。

   bug

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

  引申:ff 和ie 下对容器的-,-的解释有时不一致,似乎与之相关。

  吞吃现象

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

  img下的留白

  看这段代码有啥问题:

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

  前端解决浏览器兼容_前端兼容优化_兼容ie7的前端框架

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

  失去line-

  文字

  ,很遗憾,在ie6下单行文字 line- 效果消失了。。。,原因是

  这个-block元素和元素写在一起了。

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

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

  clear层应该单独使用

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

  dd

  ff

  ie 下:对其下的绝对层:或者相对层 :无效

  解决方案:给:加:或者: 。另,ie6支持-x或者-y的特性,ie7、ff不支持。

  前端解决浏览器兼容_前端兼容优化_兼容ie7的前端框架

  ie6下严重的bug

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

  ie6下的bug

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

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

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

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

  有时候加上div{:}

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

  总结

  出现浏览器兼容问题原因大体情况下可以分为文档结构不完整、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专门设计的样式:

  给IE6专门设计的样式:

  文章来源:http://www.toutiao.com/a6444282150925435150/