关键词:
浏览器兼容问题是指,不同厂商开发的浏览器针对同一段代码的不同解析,造成页面展示效果出现差异的情况,很多时候为了追求显示效果的一直,前端开发人员就要针对不同兼容问题应用相应的方法处理,达到效果一致的目的。
下面这些是平时开发过程中遇到的,做个汇总,方便查阅。
.target{ min-height:100px; height:auto!important; height:100px; // IE6下内容高度超过会自动扩展高度 }
ol
内li
的序号全为1,不递增。display: list-item;
- 将图片转换为块级对象
- 设置图片的垂直对齐方式
- 设置父对象的文字大小为0px
- 改变父对象的属性
- 设置图片的浮动属性
让 <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;修改其中的数值控制元素的位置。
现在,问题还没有完全解决。在用了上面的办法后,你会发现:被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 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'
);
.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){ 查看详情