见过一个优秀的回答:产品要实现A,设计说应该C,而我出了一个方案B,兼容了AC,这是我处理过最复杂的兼容性问题,它非常困难极具挑战,贯彻我整个前端生涯。总的来说,前端处理兼容也就是这,具体的有以下几个方面:
1.html兼容问题
- 双边距 BUG float 引起的 使用 display
- 3 像素问题 使用 float 引起的 使用 dislpay:inline -3px
- 超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active
- Ie z-index 问题 给父级添加 position:relative
- Png 透明 使用 js 代码 改
- Min-height 最小高度 !Important 解决’
- select 在 ie6 下遮盖 使用 iframe 嵌套
- 为 什 么 没 有 办 法 定 义 1px 左 右 的 宽 度 容 器 ( IE6 默 认 的 行 高 造 成 的 , 使 用 over:hidden,zoom:0.08 line-height:1px)
- 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*/ }
- IE6 不支持 PNG 透明背景,解决办法: IE6 下使用 gif 图片
2.css兼容问题
3.js兼容问题
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
event事件问题
-
//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轴的坐标 }
DOM节点相关问题
-
//DOM节点相关,主要兼容IE 6 7 8 function nextnode(obj){//获取下一个兄弟节点 if (obj.nextElementSibling) { return obj.nextElementSibling; } else{ return obj.nextSibling; }; } function prenode(obj){//获取上一个兄弟节点 if (obj.previousElementSibling) { return obj.previousElementSibling; } else{ return obj.previousSibling; }; } function firstnode(obj){//获取第一个子节点 if (obj.firstElementChild) { return obj.firstElementChild;//非IE678支持 } else{ return obj.firstChild;//IE678支持 }; } function lastnode(obj){//获取最后一个子节点 if (obj.lastElementChild) { return obj.lastElementChild;//非IE678支持 } else{ return obj.lastChild;//IE678支持 }; }
document.getElementsByClassName问题
-
//通过类名获取元素 document.getElementsByClassName('');//IE 6 7 8不支持; //这里可以定义一个函数来解决兼容问题,当然别在这给我提jQuery... //第一个为全局获取类名,第二个为局部获取类名 function byClass1(oClass){//全局获取,oClass为你想要查找的类名,没有“.” var tags=document.all?document.all:document.getElementsByTagName('*'); var arr=[]; for (var i = 0; i < tags.length; i++) { var reg=new RegExp('\\b'+oClass+'\\b','g'); if (reg.test(tags[i].className)) { arr.push(tags[i]); }; }; return arr;//注意返回的也是数组,包含你传入的class所有元素; } function byClass2(parentID,oClass){//局部获取类名,parentID为你传入的父级ID var parent=document.getElementById(parentID); var tags=parent.all?parent.all:parent.getElementsByTagName('*'); var arr=[]; for (var i = 0; i < tags.length; i++) { var reg=new RegExp('\\b'+oClass+'\\b','g'); if (reg.test(tags[i].className)) { arr.push(tags[i]); }; }; return arr;//注意返回的也是数组,包含你传入的class所有元素; }
获取元素的非行间样式值
-
//获取元素的非行间样式值 function getStyle(object,oCss) { if (object.currentStyle) { return object.currentStyle[oCss];//IE }else{ return getComputedStyle(object,null)[oCss];//除了IE } }
设置监听事件
-
//设置监听事件 function addEvent(obj,type,fn){//添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为false if (obj.addEventListener) { obj.addEventListener(type,fn,false);//非IE } else{ obj.attachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了 }; } function removeEvent(obj,type,fn){//删除事件监听 if (obj.removeEventListener) { obj.removeEventListener(type,fn,false);//非IE } else{ obj.detachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了 }; }
元素到浏览器边缘的距离
-
//在这里加个元素到浏览器边缘的距离,很实用 function offsetTL(obj){//获取元素内容距离浏览器边框的距离(含边框) var ofL=0,ofT=0; while(obj){ ofL+=obj.offsetLeft+obj.clientLeft; ofT+=obj.offsetTop+obj.clientTop; obj=obj.offsetParent; } return{left:ofL,top:ofT}; }
阻止事件传播
-
//js阻止事件传播,这里使用click事件为例 document.onclick=function(e){ var e=e||window.event; if (e.stopPropagation) { e.stopPropagation();//W3C标准 }else{ e.cancelBubble=true;//IE.... } }
阻止默认事件
-
//js阻止默认事件 document.onclick=function(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//W3C标准 }else{ e.returnValue='false';//IE.. } }
关于EVENT事件中的target
-
//关于event事件中的target document.onmouseover=function(e){ var e=e||window.event; var Target=e.target||e.srcElement;//获取target的兼容写法,后面的为IE var from=e.relatedTarget||e.formElement;//鼠标来的地方,同样后面的为IE... var to=e.relatedTarget||e.toElement;//鼠标去的地方 }
鼠标滚轮滚动事件
-
//鼠标滚轮事件 //火狐中的滚轮事件 document.addEventListener("DOMMouseScroll",function(event){ alert(event.detail);//若前滚的话为 -3,后滚的话为 3 },false) //非火狐中的滚轮事件 document.onmousewheel=function(event){ alert(event.detail);//前滚:120,后滚:-120 }
节点加载
-
//火狐下特有的节点加载事件,就是节点加载完才执行,和onload不同 //感觉用到的不多,直接把js代码放在页面结构后面一样能实现。。 document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.
4.浏览器兼容问题
- png24 为的图片在 iE6 浏览器上出现背景,解决方案是做成 PNG8.
- 浏 览 器 默 认 的内外边距(margin 和 padding )不 同 。 解 决 方 案 是 加 一 个 全 局 的 *{margin:0;padding:0;}来统一。
- IE6 双边距 bug:块属性标签 float 后,又有横行的 margin 情况下,在 ie6 显示 margin 比设置的大。 浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下 IE 会产生 20px 的距离,解决方案是在 float 的标签样式控制中加入 — —_display:inline或者;display:list-item ;将其转化为行内属性。(_这个符号只有 ie6 会识别) 渐进识别的方式,从总体中逐渐排除局部。 首先,巧妙的使用“\9”这一标记,将 IE 游览器从所有情况中分离出来。 接着,再次使用“+”将 IE8 和 IE7、IE6 分离开来,这样 IE8 已经独立识别。 css .bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8 识别*/ +background-color:#a200ff;/*IE6、7 识别*/ _background-color:#1e0bd1;/*IE6 识别*/ }
- IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性; Firefox 下,只能使用 getAttribute()获取自定义属性. 解决方法:统一通过 getAttribute()获取自定义属性
- IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性
- (条件注释)缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
- * Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. 超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和 active 了解决方法是改变 CSS 属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
- 在 IE 下可通过 document.frames["id"];得到该 IFRAME 对象, 而在火狐下则是通过 document.getElementById("content_panel_if").contentWindow;
- IE 的写法: _tbody=_table.childNodes[0] 在 FF 中,firefox 会在子节点中包含空白则第一个子节点为空白"", 而 ie 不会返回空白 可以通过 if("" != node.nodeName)过滤掉空白子对象
- 模拟点击事件 if(document.all){ //ie 下 document.getElementById("a3").click(); } else{ //非 IE var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, true); document.getElementById("a3").dispatchEvent(evt); }
- 事件注册 if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}
- 浏览器的宽高问题
-
var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽 //以上为不包括边框的宽高,如果是offsetWidth或者offsetHeight的话包括边框 var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽 var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高 var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高 var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离 var screenH=window.screen.height;//屏幕分辨率的高 var screenW=window.screen.width;//屏幕分辨率的宽 var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标(除了FireFox) var screenXX=window.screenX;//FireFox相对于屏幕的X坐标 var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标(除了FireFox) var screenYY=window.screenY;//FireFox相对于屏幕的y坐标
注:IE6 BUG的解决方法?
-
1.双边距BUG float引起的使用display
-
2.3像素问题使用float引起的使用dislpay:inline-3px
-
3.超链接hover 点击后失效使用正确的书写顺序link visited hover active
-
4.Ie z-index问题给父级添加position:relative
-
5.Png 透明使用js代码改
-
6.Min-height 最小高度!Important解决’
-
7.select 在ie6下遮盖使用iframe嵌套
-
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
5.安卓和ios的兼容
ui框架存在 eg:ionic中 ios文字剧中。Loading 虚线,安卓 靠左,loading视线(ui框架提供语法进行样式兼容处理)
底层硬件调用,api有说明(eg 震动 )扫一扫
功能 根据获取的系统,进行操作(内购)
更多可以看看这个https://blog.csdn.net/weixin_38536027/article/details/79375411,或者脚本51网站上去看