浏览器兼容性_浏览器兼容性示例-CSDN博客

本文链接：https://blog.csdn.net/qq_42552393/article/details/96909323

本文探讨了不同浏览器因核心技术差异导致的兼容性问题，并提出了一套处理兼容性的实用思路，包括是否需要处理、处理的程度以及具体的技术手段。文章还介绍了渐进增强与优雅降级两种策略，并通过示例代码展示了跨浏览器事件处理的兼容性解决方案。

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

不同浏览器，核心技术不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。

处理兼容问题的思路：

1、要不要做？

1 ) 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）。
2 ) 成本的角度 (有无必要做某件事)。

2、做到什么程度？

1 ) 让哪些浏览器支持哪些效果。

3、如何做？

1 ）根据兼容需求选择技术框架/库(如jquery 1.x.x)
2 ）根据兼容需求选择兼容工具：html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss.
3 ）条件注释、CSS Hack、js 能力检测做一些修补

渐进增强和优雅降级

1 )渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2 )优雅降级(graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>兼容性代码</title>
	<script>
		var eventUtil = {
			// 1.事件绑定
			bind:function(el,type,handle){
				if(el.addEventListener){
					el.addEventListener(type,handle);
				}else if(el.attachEvent){
					el.attachEvent('on'+type,handle);
				}else{
					el['on'+type] = handle;
				}
			},
			// 2.事件解绑
			unbind:function(el,type,handle){
				if(el.removeEventListener){
					el.removeEventListener(type,handle);
				}else if(el.detachEvent){
					el.detachEvent('on'+type,handle);
				}else{
					el['on'+type] = null;
				}
			},
			// 3.事件对象
			getEvent:function(event){
				return event?event:window.event;
			},
			// 4.事件目标
			getTarget:function(event){
				return event.target?event.target:event.srcElement;
			},
			// 5.停止冒泡	
			stopProp:function(event){
				if(event.stopPropagation){
					event.stopPropagation();
				}else{
					event.cancelBubble = true;
				}
			},
			// 6.阻止默认
			preventDef:function(event){
				if(event.preventDefault){
					event.preventDefault();
				}else{
					event.returnValue = false;
				}
			}
				

		};
		window.onload = function(){
			var div = document.getElementsByTagName('div')[0];
			eventUtil.bind(div,'click',function(event){
				var e = eventUtil.getEvent(event);
				console.log(e);
				console.log(this); //div
				// e  就是事件对象
				alert('绑定成功');
			});
		}
	</script>
</head>
<body>
	<div>hello</div>
</body>
</html>