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

范少坤的博客 范少坤的博客     2022-08-23     785

关键词:

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

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

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内部的标签不进行浮动。
olli的序号全为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*/
}

如何解决seleniumide与firefox的不兼容问题?

...。  现在最新的SeleniumIDE版本是V2.9.1(下载方法:火狐浏览器打开https://addons.mozilla.org/en-US/firefox/ad 查看详情

浏览器兼容问题

...方法:overflow:hidden;或font-size:0;或line-height:xxpx;3在各个浏览器下img有空隙(原因是:回车。)解决方法:让图片浮动。4一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度 查看详情

jsdate()日期函数浏览器兼容问题解决方法

...出现兼容性问题的,而newDate(datetimeformatstring)常常会出现浏览器兼容性问题,为什么,datetimeformatstring中的某些格式浏览器不兼容。1.无参//无参所有浏览器都兼容vardateTime=newDate(); 2.日期参数//日期参数格式1vardateTime=newDate("2017... 查看详情

jsdate()日期函数浏览器兼容问题解决方法

...出现兼容性问题的,而newDate(datetimeformatstring)常常会出现浏览器兼容性问题,为什么,datetimeformatstring中的某些格式浏览器不兼容。1.无参12//无参所有浏览器都兼容vardateTime=newDate();2.日期参数12//日期参数格式1vardateTime=newDate("2017-0... 查看详情

常见浏览器的兼容问题

...方法:overflow:hidden;或font-size:0;或line-height:xxpx;3在各个浏览器下img有空隙(原因是:回车。)解决方法:让图片浮动。4一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不 查看详情

浏览器的兼容性问题与解决

所谓的浏览器兼容性问题,是因为不同浏览器对同一段代码有不同的解析,造成页面显示效果不同的情况。而我们的需求是不同浏览器打开我们的网站效果是一致的,所以前端开发之前必须把兼容性问题解决。一:不同浏览器内... 查看详情

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

常见浏览器兼容性问题与解决方案原文:http://blog.csdn.net/chuyuqing/article/details/37561313/所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求... 查看详情

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

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大。碰到频率:100%解决方案:CSS里   *{margin:0;padding:0;}备注:这个是最... 查看详情

常见的兼容性问题与解决方案

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大。解决方案:CSS里   *margin:0;padding:0;备注:这个是最常见的也是最易解决的一... 查看详情

解决getelementsbyclassname兼容问题

getElementsByClassName这个方法很常用,但是只有较新的浏览器才兼容,所以我们需要自己写个方法,解决这个问题,使它能够兼容各个浏览器。functiongetElementsByClassName(node,classname){  //先判断浏览器是否支持,如果支持则直接使用i... 查看详情

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

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上;常遇到的关于浏览器的宽高问题://以下均可console.log()实验varwinW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页... 查看详情

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

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上;常遇到的关于浏览器的宽高问题://以下均可console.log()实验varwinW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页... 查看详情

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

转自http://www.cnblogs.com/duenyang/p/6066737.html常遇到的关于浏览器的宽高问题:varwinW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽varwinH=document.body.clientHeight||document.docuemntEle 查看详情

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

转载自 http://blog.csdn.net/chuyuqing/article/details/37561313/浏览器兼容问题一:不同浏览器的标签默认的padding和margin不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大。碰到频率:100%解决方案:CSS... 查看详情

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

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的... 查看详情

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

//以下均可console.log()实验varwinW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽varwinH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽//以上为不包括边框的宽高,如 查看详情

解决selenium与firefox浏览器版本不兼容问题

因为在用java打开firefox浏览器的时候报错org.openqa.selenium.firefox.NotConnectedException:Unabletoconnecttohost127.0.0.1onport7055after45000ms在网上查阅了说是兼容问题然后就开始找selenium版本与对应firefox版本匹配的记录各firefox版本下载地址http://ftp.m... 查看详情

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

event事件问题://event事件问题document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持;vare=ev;console.log(e);}document.onclick=function(){//谷歌和IE支持,火狐不支持;vare=event;console.log(e);}document.onclick=function(ev){ 查看详情