ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-01-19 12:02:23  阅读:157  来源: 互联网

标签:function 浏览器 解决方案 兼容 兼容性问题 var IE event


一、css兼容

1.不同浏览器的标签默认的margin和padding不同
解决方案:
1.css里*{margin:0;padding:0;}但是性能不好
2.一般我们会引入reset.css样式重置

2.css3新属性,加浏览器前缀兼容早期浏览器

-moz-兼容火狐浏览器
-webkit兼容safari,谷歌浏览器
-o-兼容欧鹏浏览器
-ms-兼容IE浏览器

使用:


.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加倍的问题
**解决方案:**设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

<divid=”imfloat”>
相应的css为
# imfloat{
float:left;
margin:5px;//IE下理解为10px
display:inline;//IE下再理解为5px}

4.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变css属性的排列顺序:L-V-H-A
Code:

<style type="text/css">

a:link {}
a:visited {}
a:hover {}
a:active {}

</style>

5.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
跨浏览器兼容写法:

<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>

标签:function,浏览器,解决方案,兼容,兼容性问题,var,IE,event
来源: https://blog.csdn.net/weixin_46057188/article/details/112802953

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有