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

Drizzly-ni

于 2025-04-03 16:35:07 发布

阅读量1k

点赞数 16

分类专栏： web 文章标签：前端

本文链接：https://blog.csdn.net/m0_65696193/article/details/146983854

版权

web 专栏收录该内容

81 篇文章

订阅专栏

前言：

不同的浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。

浏览器内核主要分为两种：

第一种：渲染引擎
第二种：js引擎
所以浏览器主要兼容性问题我一般分为两大部分：css兼容、js兼容

五大浏览器：内核
Chrome谷歌：之前Webkit，已改Blink内核
FireFox火狐：Gecko
Ssfari苹果：Webkit
IE ：Trident
Opera欧朋：现已改用Google 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后，又有横行的margin情况下，IE浏览器margin加倍的问题
问题：常见症状是IE6中后面的一块被顶到下一行。

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

4.设置较小高度标签（一般小于10px），在IE6，IE7，页面中高度超出自己设置的高度

解决方案：

给超出高度的标签设置overflow:hidden；
或者设置行高line-height小于你设置的高度；

5.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，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;
}

#box{
 width: 80px;
 height: 35px;
 }
html>body #box{
width: auto;
height: auto; 
min-width: 80px; 
min-height: 35px;
}

7.超链接访问过后hover样式就不出现的问题

我们可以简记一个速成口诀：L-V-H-A

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

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

8.图片默认有间距

解决方案：使用float属性为img布局（所有图片左浮）

9.css hack 解决浏览器

background-color:yellow 0; 0是留给ie8的
+background-color:pink; + ie7
_background-color:orange; _专门给神奇的ie6

background-color:yellow 0; 0是留给ie8的
+background-color:pink; + ie7
_background-color:orange; _专门给神奇的ie6

二、js兼容

1.时间绑定

IE：dom.attachEvent();
标准浏览器:dom.addEventListener('click',function(event){},false);

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轴的坐标
}

3.event.srcElement(事件源对象)问题

IE:event对象有srcElement属性，但是没有target属性；
Eirefox：event对象有target属性，但是没有srcElement属性.

srcObj=event.srcElement?event.scrElement:event.target;

4.获取元素的非行间样式值：

IE:dom.currentStyle[‘width’]获取元素高度
标准浏览器:window.getComputedStyle(ibj,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];
   }
}

//获取元素属性值的兼容写法
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
       }
   }

//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标准
   }
}

//js阻止默认事件 一般阻止a链接href，form表单submit提交
document.onClick=function(e){
	var e=e||window.event;
	if(e.preventDefault){
		e.preventDefault();//W3C标准
	}
}

7.ajax兼容问题

IE:ActiveXObject
其他： xmlHttpRequest

在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("失败");	
					}	
				}	
			};
				
		};
	};