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

因为不同浏览器的内核不同,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎,另一个是js引擎
所以浏览器兼容性问题一般指:css兼容、js兼容

五大浏览器内核
Chrome谷歌之前用 Webkit,现已改用 Blink 内核
FireFox火狐Gecko (给口)
Safari苹果Webkit (歪脖 卡特)
IETrident (踹扽特))
Opera欧朋现已改用Chrome谷歌的 Blink(不领可) 内核
一、css兼容
***1. 不同浏览器的标签 默认的margin和padding不同

解决方案:

  • CSS里 *{margin:0;padding:0;} 但是性能不好
  • 一般我们会引入reset.css样式重置;
***2.css3新属性,需要加前缀来兼容各个浏览器

-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */

3.块级元素在设置float时,IE会出现双倍margin的问题

解决方案:在这个div里面加上display:inline;

4.设置较小高度标签(一般小于10px),在IE6,IE7,页面中高度超出了自己设置的高度

解决方案:

  • 给超出高度的标签设置overflow:hidden;
  • 或者设置行高line-height 小于你设置的高度。
5.行内属性标签,设置display:block后采用float布局,IE6外边距bug

解决方案:在display:block;后面加入display:inline;/display:table;

6. IE浏览器div最小宽度和高度不生效的问题

解决方案:

#box{
  width: 80px;
  height: 35px;
  }
html>body #box{
 width: auto;
 height: auto; 
 min-width: 80px; 
 min-height: 35px;
 }
***7.超链接访问过后hover样式就不出现的问题

解决方案:改变CSS属性的排列顺序: L-V-H-A。

a:link {}
a:visited {}
a:hover {}
a:active {}
***8.图片默认有间距

解决方案:给图片添加float:left;属性。

***9. 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); (add 易文特 历史呢)

***2. event事件对象问题
    document.onclick=function(ev){//兼容写法;
        var e=ev||window.event;
        //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’];
(get 康姆破腾特 失态哦)
跨浏览器兼容解决方法:

 // 获取元素属性值的兼容写法
  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.onclick=function(e){
        var e=e||window.event;
        if (e.stopPropagation) {
            e.stopPropagation();//W3C标准  
            (施陶普 普瑞普给沈)
        }else{
            e.cancelBubble=true;//IE....
            (看事 巴伯)
        }
    }
***6.阻止事件默认行为:
//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..
        }
    }
***7.ajax兼容问题

IE: ActiveXObject (爱课题v 爱克斯 哦毕节科特)
其他: xmlHttpRequest (X M L http 瑞快事特)

在IE6以前不是用XMLHttpRequest创建的,所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()

跨浏览器兼容解决方法:

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("失败");	
					}	
				}	
			};
				
		};
	};
  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值