浏览器兼容问题与解决方法

浏览器兼容问题是指，不同厂商开发的浏览器针对同一段代码的不同解析，造成页面展示效果出现差异的情况，很多时候为了追求显示效果的一直，前端开发人员就要针对不同兼容问题应用相应的方法处理，达到效果一致的目的。

下面这些是平时开发过程中遇到的，做个汇总，方便查阅。

1、<!DOCTYPE HTML>文档类型的声明

产生条件：IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象；

解决办法：书写文档声明。

2、横向双外边距

产生条件：在IE6中块元素浮动后（左浮左margin，右浮右margin），会出现横向双倍margin现象。

解决办法：在float标签的样式控制中加入display：inline，或者左幅右margin，右浮左margin。

3、默认行高

产生条件：IE6\IE7遨游浏览器；设置的文字高度超出盒模型内容区域设置的高度时会影响布局。

解决办法：给超出高度的标签设置overflow：hidden；或将文字的行高line-height设置为小于块的高度

4、不同浏览器当中，很多的标签的默认样式不同，如默认的外补丁内补丁。

产生条件：不同浏览器

解决方法：利用CSS reset文件进行样式的清除，然后在根据需要进行设置。

5、img外部的border

产生条件：img外部有a标签，即img标签有链接时

解决办法：设置img边框border：0；

6、经典3像素bug

产生条件：IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。

解决办法：设置非浮动元素浮动。

7、png格式图片

产生条件：IE6浏览器，不支持透明；

解决办法：使用JavaScript进行处理；或者使用GIF、JPG图像替代掉png图片的使用。

8、默认行高

产生条件：清浮动的时候，有些人会采取一种清浮动的方法，使用一个空的div，然后为这个div设置{clear：both}。在大部分浏览器当中，这样做是没有任何问题的，但是在IE6浏览器当中，div即使是空的，也会存在默认行高。

解决方法：设置其高度为0，并设置overflow：hidden。{height：0；overflow：hidden；clear：both；}

9、图片默认有间距

产生条件：img标签（每个标签后敲了回车）

解决方法：为img设置float的浮动布局方式。

10、a标签hover不适用于所有标签

产生条件：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；

解决办法：合理用a标签嵌套其它行内标签或者用JavaScript模拟a的hover效果；

11、table标签当中border-color属性设置无效

产生条件：IE6中table设置属性border-color无效；

解决办法：运用CSS样式进行控制，而不是使用属性进行样式的处理。

12、透明rgba与opacity

产生条件：IE6不支持此两种特命的设置方法；

解决办法：使用IE6当中的滤镜filter替代掉，如：opacity：0.6；filter：alpha（opacity=60）

13、子选择器在IE6中不能使用

产生条件：IE6浏览器，使用E>F子选择器；

解决办法：采用其他选择器或者采用后代选择器进行控制，如div p{margin:10px;}  div p p {margin:0;}替代掉div>p {margin:10px;}

14、不支持最大最小宽度

产生条件：IE6浏览器，标签的最小高度、宽度设置（min/max-height）

解决办法：为IE6单独设置hack，即_height：最小高度值；_width：最小宽度值（对于IE6，当实际宽高超出定义的宽高时，元素会自动调整宽高）。对于最大高度和最大宽度，没有必要设置兼容，当前对于开发者来说，只需要保证IE6下正常显示即可。无需在它身上花费太多功夫

.target{
    min-height:100px;
    height:auto!important;
    height:100px;   // IE6下内容高度超过会自动扩展高度
}

15、纵向居中，IE6不支持display：table-cell

产生条件：IE6浏览器，设置一个元素在另一个元素中垂直方向上居中对齐，不能够支持以单元格的方式来显示元素；

解决办法：如果是单行文本，采用line-height和height的配合使得文本垂直居中，如果中间是其他元素或者多行文本，采用其他方法进行居中处理。

16、input聚焦框颜色与样式不同

产生条件：各个浏览器表现不同；

处理方法：使用outline：none，清除默认样式之后再统一设置

17、鼠标移上小手效果

产生条件：IE6,cursor:hand  :IE完全支持。但是在Firefox是不支持的，没有效果。cursor：pointer：是CSS2.0的标注。所以Firefox是支持的，但是IE5.0即之前版本不支持。

IE6开始支持。

解决办法：设置两种cursor：pointer；cursor：hand.

18、子标签无法撑开父标签的高度

产生条件：父标签内部含一个或多个子标签，父标签没有设置浮动，而子标签发生浮动：

处理方法：方法1：在子标签最后添加清除浮动的设置<div style="height:0;clear:both"></div>;方法2：为父标签添加{overflow：hidden}的样式；方法3：为父标签设置固定高度

19、li的间距问题

产生条件：IE6浏览器li标签设置宽高，且li里面的元素发生了浮动；

处理方法：方法1：li不设置宽高；方法2：li内部的标签不进行浮动。

ol内li的序号全为1，不递增。

解决方法：为li设置样式display: list-item;

20、行内元素布局混了

产生条件：行内元素为包含框时，如果包含框包含的绝对定位元素以百分比单位进行定位；

处理方法：在行内元素当中加入{zoom：1}，出发IE的haslayout。

21、多显示一个字

产生条件：多个浮动元素中间夹杂HTML注释语句，浮动元素宽度设置为100%；则在下一行多显示一个上一行的最后一个字符；

处理方法：果断删掉注释！

22、CSS优先级 ！important

产生条件：IE6当中，在同一组CSS属性中，!important不起作用；

处理方法：单独设置

23、img图片下部高度多余5px

产生条件：IE6浏览器；

处理方法：将图片转化为块级对象，即display：block。还有四种其他方法，详细解释参见日志：IE6BUG图片元素img下高度超出，出现多余空白。

  • 将图片转换为块级对象

即，设置img为“display:block;”。

  • 设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。

  • 设置父对象的文字大小为0px

即，在代码中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

  • 改变父对象的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。

  • 设置图片的浮动属性

即在本例中增加一行CSS代码： img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

24、hack技术：

hack主要针对IE浏览器，如果想对某一款或某几款浏览器的样式进行调整，我们可以使用hack技术

_IE6

*IE6 IE7

+IE6 IE7

\9 IE6 IE7 IE8 IE9 IE10

\0 IE8 IE9 IE10 IE11

25、IE6不兼容position:fixed

在 IE6 中实现 position:fixed; 在 IE6 中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 来解决它。（当然，IE6 的问题也不仅仅 position:fixed;）

让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的20个像素，代码如下：

#top{
    position:fixed;
    _position:absolute;
    bottom:0;
    right:20px;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

right 跟 left 属性可以用绝对定位的办法解决，而 top 跟 bottom 就需要用上面的表达式来实现。其中在_position:absolute;中的_符号只有 IE6 才能识别，目的是为了区分其他浏览器。

上面的只是一个例子，下面的才是最重要的代码片段：

使元素固定在浏览器的顶部

#top{
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}
/*使元素固定在浏览器的底部*/
#top{
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

这两段代码只能实现在最底部跟最顶部，你可以使用 _margin-top:10px; 或者 _margin-bottom:10px;修改其中的数值控制元素的位置。

position:fixed; 闪动问题

现在，问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：

*html{
    background-image:url(about:blank);
    background-attachment:fixed;
}

其中 * 是给 IE6 识别的。

26、IE6 7 8不支持background-size

兼容写法：filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘/image/xxx.jpg‘, sizingMethod=‘scale‘);

27、IE6 7 z-index bug 自己层级尽管设置9999都不管用

解决办法：父级层级提高。

28、IE6透明兼容处理：

.filter {
　　/*background: #ce4138; */
　　background: rgba(211, 66, 55, 0.93);
　　filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = ‘#a3ce4138‘,endColorstr = ‘#eece4138‘ );
}

29、IE5-8不支持opacity,处理办法：

.opacity{
    opacity:0.4
    filter:alpha(opacity=60);/* for IE5-7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/* for IE 8*/
}
时间： 2024-12-25 23:19:46

浏览器兼容问题与解决方法的相关文章

IE浏览器兼容问题的解决方法

最近在写网页遇到遇到一些网页兼容的问题特别多,其中一个就是我这边的IE,360是没有看出问题的.但是到了客户那边却出现了很严重的页面变形问题,想了一下,应该就是大家的浏览器版本不一样导致的,我是按照自己的版本来写网页,也有测试IE8910的兼容性.当然,如果客户那边能够使用版本高一点的浏览器就最好了,但这是政府的项目不能这么要求他们,只能自己解决. 查了一下资料找到这个答案:从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染.兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添

常见的浏览器兼容问题和解决方法

为什么会有兼容问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容. 使用Trident内核的浏览器:IE.Maxthon.TT: 使用Gecko内核的浏览器:Netcape6及以上版本.FireFox: 使用Presto内核的浏览器:Opera7及以上版本: 使用Webkit内核的浏览器:Safari.Chrome. 而我现在所说的兼容性问题,主

IE下的浏览器兼容问题及解决方法2

浏览器差异 1.ul和ol列表缩进问题 消除ul.ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效,padding属性对FireFox有效. [注] 经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进.空白以及列表编号或圆点,设置padding对样式没有影响:在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须

JS中常遇到的浏览器兼容问题和解决方法

//以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽 //以上为不包括边框的宽高,如果是offsetWidth或者offsetHeight的话包括边框 var winWW=d

python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法？

python_java_selenium_ jenkins持续集成Firfox_chrome浏览器不显示的解决方法: 原因:因为jenkins是用windows installer 安装成 windows的服务了,那么jenkins是计算机服务理的一个后台服务,所以跑cases 的时候不显示浏览器 解决办法:1.我们需要关掉jenkins后台服务,让他从cmd(dos窗口)启动,类似于tomcat的手动启动下面的方法适合不用tomcat的同学(注意,用也可以配置好Tomcat放在webapp下启

常见的IE浏览器的一些兼容问题及解决方法

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问题症状:常见症状

遇到的浏览器兼容问题及应对方法

前言: 上周天的时候有个学长找我帮忙做三张页面,因为没有数据交换之类的,只是单纯的前端页面,想着好久没做东西, 看书都看烦了,所以就接了也当是练手.之前因为没有系统的看书,所以其实很多问题都考虑的不全面,属于知其然不知其所以然的状态,虽然现在也还有很多要学的东西,但是知道自己的不足总比不知道强吧?而且这也算是一种进步?总之,遇到各种问题,然后我发现问题主要分为两类,一:我自己知识点不够所以不知道怎么解决的,这种问题大多求问度娘或者问大神是可以搞定的:二:属于确实是现阶段技术存在漏洞的,不论是还没

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题.在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的

常见浏览器兼容问题及解决技巧

首先我们应该了解一下为什么会有兼容问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容. 使用Trident内核的浏览器:IE.Maxthon.TT: 使用Gecko内核的浏览器:Netcape6及以上版本.FireFox: 使用Presto内核的浏览器:Opera7及以上版本: 使用Webkit内核的浏览器:Safari.Chrome. 而我现在