黑基网 首页 学院 编程开发 查看内容

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

2017-9-5 01:05| 投稿: xiaotiger |来自: 互联网

摘要: 问题描述随着互联网的大众化,人们的日常工作环境也渐渐的由传统转移到Web浏览器中,从而就使得我们必须编写大量的B/S模式的软件来满足人们日常的一些工作。作为一个开发人员,我们知道现在有很多的浏览器可以供人们 ...

问题描述

随着互联网的大众化,人们的日常工作环境也渐渐的由传统转移到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]-->

小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册黑基账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!

本文出自:http://www.toutiao.com/a6444282150925435150/

免责声明:本文由投稿者转载自互联网,版权归原作者所有,文中所述不代表本站观点,若有侵权或转载等不当之处请联系我们处理,让我们一起为维护良好的互联网秩序而努力!联系方式见网站首页右下角。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论


新出炉

返回顶部