浏览器兼容性问题

原创已于 2024-03-04 10:49:56 修改 · 816 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

于 2023-03-10 17:56:15 首次发布

文章详细阐述了浏览器内核的差异导致的CSS和JavaScript的兼容性问题。在CSS方面，提到了不同浏览器对margin和padding的默认值处理，CSS3新属性的浏览器前缀需求，以及针对IE的特定解决方案，如CSSHack。在JavaScript方面，讨论了事件绑定的不同方式，事件对象的处理，阻止事件冒泡和默认行为，以及Ajax的跨浏览器实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

浏览器	内核（渲染引擎）
Chrome谷歌	之前Webkit，已改Blink内核
FireFox火狐	Gecko
Safari苹果	Webkit
IE	Trident
Opera欧朋	现已改用Google Chrome的Blink内核

一、css兼容：

不同浏览器的标签默认的margin和padding不同

解决方案：把所有标签的margin和padding设置为0即可

CSS里 *{margin:0;padding:0;}

css3新属性，加浏览器前缀兼容早期浏览器

厂商前缀	浏览器
`-moz-`	firefox火狐浏览器
`-webkit-`	Chrome谷歌旧版浏览器
-webkit-	sefari
`-o-`	Opera浏览器(早期)
`-ms-`	IE

例：

             box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -o-box-sizing: border-box;
            -moz-box-sizing: border-box;

哪些css3属性需要加前缀：

定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow  盒子阴影
flex  弹性布局
谷歌浏览器改变滚动条样式  ::-webkit-scrollbar {}
....

安装插件以后可以自动添加浏览器前缀

块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

快属性标签： Div,p,h1~h6,ol,ul,li等

解决方案：将块级元素display设置为inline；

ul标签在Firefox中默认是有padding值的，而在IE中只有margin有值

解决方案：ul{margin: 0;padding: 0;}

设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状： 设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.

解决方案：

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

IE6不支持min-height属性

解决方案：{min-height: 200px; _height: 350px;}

IE6及更低版本中，部分块元素拥有默认高度

解决方案：给元素设置font-size: 0;

图片默认有间距

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

IE6/7图片下面有空隙的问题

解决方案：img{display: block;}

图片加a标签在IE9中会有边框

解决方案：img{border: none;}

案例：多个背景图中选一个作为背景，谷歌浏览器根据不同的屏幕显示不同的图片大小，1x表示一个像素

 background-image: -webkit-image-set(url("img/small.jpg") 1x,url("img/big.jpg") 2x);

css hack解决浏览器兼容-针对IE

不同浏览器，识别不同的样式，css hack本身就是处理浏览器兼容的

css hack	兼容	使用案例
*	IE5 IE6 IE7	*color
+		+color
-		-color
_	IE5~ IE6	_color
#		#color
\0	IE8~ IE11	color:red\0
\9	IE8~ IE11	color:red\9
\9\0	IE9~ IE10	color:red\9\0
!important		color:blue !important;color:green;

判断是否为IE浏览器

    <[if IE]>
    <p>这是IE浏览器</p>
    <![endif]>
    <p>这是非IE浏览器</p>

IE9以下浏览器不能使用opacity（透明度）

解决办法：{opacity: 0.5;filter: alpha(opacity = 50);

filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}

两个块级元素，父元素设置了overflow:auto，子元素设置了position:relative ，且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决办法：父级元素设置position:relative

cursor(鼠标手型)兼容问题

解决方案：统一使用{cursor: pointer;}

二、js兼容

事件绑定

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

event事件对象问题

    document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
        var e=ev;
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
    }
    document.onclick=function(ev){//兼容写法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠标X轴的坐标
        var mouseY=e.clientY;//鼠标Y轴的坐标
    }

event.srcElement(事件源对象)问题
IE： event对象有srcElement属性，但是没有target属性；
Firefox: event对象有target属性，但是没有srcElement属性。
解决方法：

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

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

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]; 
 　    }
 }

阻止事件冒泡传播：

document.onclick=function(e){
        var e=e||window.event;
        if (e.stopPropagation) {
            e.stopPropagation();//W3C标准
        }else{
            e.cancelBubble=true;//IE....
        }
 }

阻止事件默认行为：

document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue='false';//IE..
        }
 }

jax兼容问题

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>