-
2022-01-12 16:33:38
在不同的浏览器中,浏览器的内核都是不相同的,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎,另一个是js引擎,所以浏览器的兼容性问题一般是指:css兼容、js兼容Css兼容性问题:
1.不同浏览器的标签默认的margin和padding不同
解决办法:可以通过设置全局样式来解决这个问题,这样所有的样式都会重置,初始值都会相同了。
2.css3新属性,加浏览器前缀兼容早期浏览
-moz- / 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE /3.块属性标签float后,又有横行的margin的情况下,IE浏览器margin加倍的问题
设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上display:inlin.
4.设置较小高度标签(小于一般10px),在IE6,IE7,遨游中高度超出自己设置高度
可以通过给高出的标签设置overflow:hidden
或设置行高line-height小于你设置的高度
5.行内属性标签,设置display:black后采用float布局,又有横行的margin的情况下,IE6间距bug
IE6里的间距比超过设置的间距,可以通过在display:block;后面加入display:inline;display:table;
6.IE浏览器div最小高度和宽度的问题
加宽高,并且宽高加auto
7.超链接访问过hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
a:link{}>a:visited{}>a:hover{}>a:active{}
8.图片默认有间距
几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。
可以通过使用float属性为img布局(所有图片左浮)9. css hack解决浏览器兼容性
不同浏览器,识别不同的样式,css hack本身就是处理浏览器兼容的
二、js兼容
1. 事件绑定
IE: dom.attachEvent();
标准浏览器: dom.addEventListener(‘click',function(event){},false);var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器,ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
2.event事件对象问题
document.οnclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持;
var e=ev;
console.log(e);
}
document.οnclick=function(){//谷歌和IE支持,火狐不支持;
var e=event;
console.log(e);
}
document.οnclick=function(ev){//兼容写法;
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
3. event.srcElement(事件源对象)问题
IE: event对象有srcElement属性,但是没有target属性;
Firefox: event对象有target属性,但是没有srcElement属性。解决办法:srcObj = event.srcElement?event.srcElement:event.target;
4.获取元素的非行间样式值
IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器:window.getComputedStyle(obj, null)['width'];// 获取元素属性值的兼容写法
function getStyle(obj,attr){
if(obj.currentStyle){
//兼容IE
obj.currentStyle[attr];
return obj.currentStyle[attr];
}else{
//非IE,
return window.getComputedStyle(obj, null)[attr];
}
}
5.阻止事件冒泡传播
//js阻止事件传播,这里使用click事件为例
document.οnclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE.... true: 不被上层元素的事件控制
}
}
6.阻止事件默认行为
//js阻止默认事件 一般阻止a链接href,form表单submit提交
document.οnclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE.. false: 不会进行判断就直接执行下去
}
}
7. ajax兼容问题
IE: ActiveXObject
其他: xmlHttpRequest在IE6以前不是用XMLHttpRequest创建的,所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()
跨浏览器兼容解决方案:
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
//1.创建ajax对象
//只支持非IE6浏览器
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
//alert(new XMLHttpRequest());
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
// 但服务器那端是不解析这个时间的
oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
//3.发送
oAjax.send(null);
//4.接受信息
oAjax.onreadystatechange = function(){
//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了
if(oAjax.readyState==4){
//状态码,只有等于200,代表接受完成,并且成功了
if(oAjax.status==200){
alert("成功" + oAjax.responseText);
}else{
alert("失败");
}
}
};
};
};
</script>
Js相关
JavaScript分三个部分:
1. ECMAScript标准---基本语法
2. DOM--->Document Object Model 文档对象模型,操作页面元素的
3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的
浏览器中有个顶级对象:window----皇上
页面中顶级对象:document-----总管太监
页面中所有的内容都是属于浏览器的,页面中的内容也都是window的,因为页面中的所有内容都是window的,window是可以省略的.
变量是window的
更多相关内容 -
Javascript 多浏览器兼容性问题及解决方案
2020-12-09 15:05:03CSS 多浏览器兼容性问题及解决方案一、document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements [“elementName”];Firefox 下... -
详解Vue Cli浏览器兼容性实践
2020-11-20 11:27:14在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,:backhand_index_pointing_down:下面是来自statCounter的数据,基本上覆盖了全世界浏览器市场份额的统计,而且前端er经常使用的caniuse所... -
CSS浏览器兼容性常见问题总结大全(推荐)
2021-01-21 12:56:55DIV+CSS设计IE6、IE7、FF 兼容性 DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更... -
jQuery解决浏览器兼容性问题案例分析
2020-10-22 13:37:43主要介绍了jQuery解决浏览器兼容性问题的方法,结合实例形式分析了针对不同浏览器的click事件响应兼容性问题,需要的朋友可以参考下 -
浏览器兼容性测试模板
2018-02-02 15:51:20确定浏览器测试类型,需要关注的测试项目.确定浏览器测试类型,需要关注的测试项目 -
Web浏览器兼容性测试工具如何选择?
2021-03-23 14:40:52网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很棒的浏览器兼容性测试工具让... -
CSS hack大全之特殊符号的应用解决浏览器兼容性问题
2020-12-09 04:29:16由于各大浏览器尤其IE浏览器对web标准支持情况不一,导致标准的网页在各个浏览器中的表现不一,因此,解决各浏览器兼容性问题成为了前端工程师最重要的工作之一,而所谓的hack技术则是前端开发中必用的。 CSS hack... -
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2020-12-28 22:59:07本文是软件开发网小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧! 1. children与childNodes IE提供的children、childNodes和firefox下... -
浏览器兼容性测试-PHONE
2021-03-23 15:14:371为什么要有兼容性测试:比web浏览器还恐怖的手机浏览器 对于web网站,一般来说,目前我们需要兼容的是 1个操作系统(windows)X3种浏览器(ie6、ie7、firefox)=3种情况 要求高一点的web网站需要兼容的是 1个... -
4种方案解决CSS浏览器兼容性问题
2021-01-08 17:30:364种方案解决CSS浏览器兼容性问题 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9…360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon... -
前端开发必备:12款浏览器兼容性测试工具推荐
2020-09-22 13:31:44主要介绍了前端开发必备:12款浏览器兼容性测试工具推荐,浏览器兼容性测试工具一般都具备模拟当前主流浏览器的功能,例如国内用的比较多的IETester,就可以模拟IE6、IE7、IE8等,这样就方便了前端的CSS和JS的调试,需要... -
浅谈浏览器兼容性模式[按F12便知]
2021-01-21 14:12:49面试官:请你谈谈标准(Standards)模式、怪异(Quirks)模式、准标准(Almost Standards)模式,当你打开IE9时候会看见,浏览器模式,文档模式,兼容性视图,这些又是什么? 好吧,一点点来:先明白一个词DTD(文档类型... -
setTimeout和setInterval的浏览器兼容性分析
2020-10-31 02:20:46setTimeout和setInterval的浏览器兼容性分析 -
避免不必要的浏览器兼容性问题的5个技巧
2020-09-24 20:11:49浏览器兼容性问题总是让人很头疼,这里介绍几个技巧来避免这个问题,需要的朋友可以参考下 -
Dom与浏览器兼容性说明
2021-01-19 18:25:01作为一个Web前端工作者,你是否在工作中常被浏览器兼容性问题所困惑.例如Css样式? 明明在 IE浏览器里显示一切正常的网页.到了FireFox或谷歌浏览器中却乱作一团.或许你在使用JavaScript和Dom编写网页脚本时,也... -
关于angular浏览器兼容性问题的解决方案
2021-01-19 12:34:07edge浏览器下,固定列的边框消失 问题 :edge浏览器下,固定列的边框消失 原因 :ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签: position: -webkit-sticky !... -
基于模型比较的跨浏览器兼容性测试
2021-04-04 03:54:56基于模型比较的跨浏览器兼容性测试 -
常见浏览器兼容性问题与解决方案css篇
2021-01-21 12:10:46所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的... -
Web浏览器兼容性测试工具如何选择?
2021-03-23 15:03:07网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很棒的浏览器兼容性测试工具让... -
常见的浏览器兼容性问题(小结)
2020-11-21 18:23:56浏览器的兼容性无非还是样式兼容性(css),交互兼容性(javascript),浏览器 hack 三个方面。 样式兼容性(css)方面 (1) 因为历史原因,不同的浏览器样式存在差异,可以通过 Normalize.css 抹平差异,也可以... -
解决CSS浏览器兼容性问题的4种方案
2020-11-21 16:05:11为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9…360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon(傲游)…… 关键是不同厂商,... -
IE系列浏览器兼容性测试点整理
2021-03-23 11:41:22在web项目进行浏览器兼容性测试,论坑最多的,非IE系列浏览器莫属,且IE8是我们组开发的心中的痛,一提到有兼容性bug,第一反应:是不是IE的?卧槽,又是IE8! 由于项目产品需要,管理后台和官网等web项目都需要兼容... -
论文研究-一种Web应用跨浏览器兼容性测试方法.pdf
2019-09-16 11:12:43提出一种结合DOM(Document Object Model)结构分析和页面元素(Screen Element)的计算机视觉分析方法,实现Web应用的跨浏览器兼容性测试XBCT(Cross-Browser Compatibility Testing),和现有的测试方法比较,实验... -
常见的浏览器兼容性问题
2022-01-12 21:28:59所以浏览器兼容性问题一般指:css兼容、js兼容 一、css兼容 1. 不同浏览器的标签默认的margin和padding不同 问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率: 100% ...前言:
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎 所以浏览器兼容性问题一般指:css兼容、js兼容
一、css兼容
1. 不同浏览器的标签默认的margin和padding不同
问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率: 100%
解决方案:
- CSS里 *{margin:0;padding:0;} 但是性能不好
- 一般我们会引入reset.css样式重置;
备注
: 这个是最常见的也是最易解决的一个浏览器兼容性问题,所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。2. css3新属性,加浏览器前缀兼容早期浏览器
-moz- /* 火狐浏览器 / -webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 / -o- / Opera浏览器(早期) / -ms- / IE */
哪些css3属性需要加:
定义关键帧动画 @keyframes css3中的变形(transform)、过渡(transtion)、动画(animation) border-radius 圆角 box-shadow 盒子阴影 flex 弹性布局
使用:
.myClass { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; /* 不带前缀的放到最后 */ } /* 复杂属性 keyframes */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } /* 不带前缀的放到最后 */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } }
3. 块属性标签float后,又有横行的margin情况下,IE 浏览器margin加倍的问题
问题症状: 常见症状是IE6中后面的一块被顶到下一行
解决方案: 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
<divid=”imfloat”> 相应的css为 # imfloat{ float:left; margin:5px;//IE下理解为10px display:inline;//IE下再理解为5px}
备注: 我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
4. 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状: 设置div高度小于10px,IE6、7和遨游里div的高度,超出自己设置的10px.碰到频率: 60%
解决方案:
给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于你设置的高度。
备注: 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。5. 行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
问题症状: IE6里的间距比超过设置的间距
碰到几率: 20%
解决方案: 在display:block;后面加入display:inline;display:table;
备注: 行内属性标签,为了设置宽高,我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe
6. IE浏览器div最小宽度和高度的问题
问题症状: IE浏览器div最小宽度和高度不生效
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个最小宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px; } html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px; }
7. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
Code:
<style type="text/css"> a:link {} a:visited {} a:hover {} a:active {} </style>
8. 图片默认有间距
问题症状: 几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。
碰到几率: 20%
解决方案: 使用float属性为img布局(所有图片左浮)
备注: 因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
9. css hack解决浏览器兼容性
不同浏览器,识别不同的样式,csshack本身就是处理浏览器兼容的。
下面是css hack写法:background-color:yellow0; 0 是留给ie8的 +background-color:pink; + ie7定了; _background-color:orange; _专门留给神奇的ie6;
二、js兼容
1. 事件绑定
IE:
dom.attachEvent()
;
标准浏览器:dom.addEventListener(‘click',function(event){},false)
;标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值第三值默认false,表示事件冒泡方式。
如果浏览器不支持
addEventListener()
方法, 你可以使用attachEvent()
方法替代。以下实例演示了跨浏览器的解决方法:
var x = document.getElementById("myBtn"); if (x.addEventListener) { //所有主流浏览器,ie9+ x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早 IE 版本 x.attachEvent("onclick", myFunction); }
2. event事件对象问题
document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持; var e=ev; console.log(e); } document.onclick=function(){//谷歌和IE支持,火狐不支持; var e=event; console.log(e); } document.onclick=function(ev){//兼容写法; var e=ev||window.event; var mouseX=e.clientX;//鼠标X轴的坐标 var mouseY=e.clientY;//鼠标Y轴的坐标 }
2. event.srcElement(事件源对象)问题
IE:event
对象有srcElement
属性,但是没有target
属性;
Firefox:event
对象有target
属性,但是没有srcElement
属性。
解决方法:srcObj = event.srcElement?event.srcElement:event.target;
3. 获取元素的非行间样式值:
IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器:window.getComputedStyle(obj, null)['width']
;跨浏览器兼容解决方法:
// 获取元素属性值的兼容写法 function getStyle(obj,attr){ if(obj.currentStyle){ //兼容IE obj.currentStyle[attr]; return obj.currentStyle[attr]; }else{ //非IE, return window.getComputedStyle(obj, null)[attr]; } }
4. 阻止事件冒泡传播:
//js阻止事件传播,这里使用click事件为例 document.onclick=function(e){ var e=e||window.event; if (e.stopPropagation) { e.stopPropagation();//W3C标准 }else{ e.cancelBubble=true;//IE.... } }
5. 阻止事件默认行为:
//js阻止默认事件 一般阻止a链接href,form表单submit提交 document.onclick=function(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//W3C标准 }else{ e.returnValue='false';//IE.. } }
6. ajax兼容问题
IE: ActiveXObject
其他: xmlHttpReuest在IE6以前不是用XMLHttpRequest创建的,所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()
跨浏览器兼容解决方法:
<script> window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ //1.创建ajax对象 //只支持非IE6浏览器 var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); //alert(new XMLHttpRequest()); }else{ //只支持IE6浏览器 oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但 // 但服务器那端是不解析这个时间的 oAjax.open("get","a.txt?t=" + new Date().getTime(),true); //3.发送 oAjax.send(null); //4.接受信息 oAjax.onreadystatechange = function(){ //浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了 if(oAjax.readyState==4){ //状态码,只有等于200,代表接受完成,并且成功了 if(oAjax.status==200){ alert("成功" + oAjax.responseText); }else{ alert("失败"); } } }; }; }; </script>
-
css与javascript跨浏览器兼容性总结
2020-10-25 10:46:37主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下