2019-09-10 7 分钟读完 (大约 981 个字)

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

由于浏览器种类众多，各浏览器内核也不尽相同，对于网页解析也就各自不同，从而刀子浏览器兼容问题的出现，程序员开发出的网页要在主流浏览器上运行，就要做好浏览器兼容。

浏览器内核

Trident(IE)内核： IE浏览器
Webkit内核：Safari浏览器 Chrome浏览器
Gecko内核：Firefox浏览器内核
Presto内核：Opera浏览器早期内核浏览器内核主要作用是将页面转变为可视可听的图像结果，通常也被称为渲染引擎；主要包括HTML解释器，css解释器，布局，JavaScript引擎，绘图和网络等。

1.html解释器：解释HTML文本的解释器，主要是将HTML文本解析成DOM树
2.css解释器：级联样式的解释器，主要是为DOM中的各元素对象提供样式，为网页布局简历基础设施
3.布局：在DOM树创建之后，将其中的元素对象同样式信息结合，计算大小位置等布局信息，形成一个可以表示所有这些信息的内部表示模型
4.JavaScript引擎：解析js代码，并且通过DOM接口和CSS接口来修改网页内容和样式信息，从而完成渲染结果
5.绘图：使用图形库将布局计算后将各网页节点绘制成图像结果

下图为内核渲染过程及各阶段依赖的其他模块：

网页内容输入到HTML解释器，HTML解释器在解释后构成一棵DOM树，这期间如果遇到js代码，就交给js引擎处理，如果遇到css，就交给css解释器去处理。当DOM建立的时候，渲染引擎收到来自CSS解释器的样式信息，构建一个新的内部绘图模型。该模型由布局模块计算模型内部各个元素的位置和大小信息，最后由绘图模块完成从该模型到图像的绘制,虚线表示在渲染过程中可能使用到的其他模块。

浏览器兼容

1.样式兼容性(css)

样式兼容

1.各浏览器默认样式存在差异，可以通过Normalize.css去除差异，也可以自己写一个重置默认样式reset.css,通过通配符选择器，重置全局样式。

1	* { margin: 0; padding: 0; }

2.透明属性，IE9以下浏览器不能使用opacit

1
2
3

opacity: 0.5;
filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

2.交互兼容性(javascript)

交互兼容性

1.事件兼容问题，一般需要封装一个适配器，过滤事件句柄绑定，移除，冒泡阻止以及默认事件处理

var helper = {}

//绑定事件
helper.on = function(target, type, handle) {
  if(target.addEventListener) {
    target.addEventListener(type, handle, false);
  } else {
    target.attachEvent("on"+type,
            function(event) {
              return handle.call(target, event);
            }, false);
  }
};

//取消事件监听
 helper.remove = function(target, type, handler) {
 	if(target.removeEventListener) {
 		target.removeEventListener(type, handler);
 	} else {
 		target.detachEvent("on" + type,
 	    function(event) {
 			return handler.call(target, event);
 		}, true);
     }
 };

3.获取scrolltop通过document.documentElement.scolltop兼容非Chrome浏览器

1	var scolltop = document.documentElement.scolltop\|\|document.body.scolltop;

3.浏览器Hack

1.快速判断IE浏览器版本

1
2
3

<!--[if IE 8]> ie8 <![endif]-->

<!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->

2.判断是否是Chrome浏览器

1 2	/* chrome */ var isChrome = Boolean(window.chrome)

转自掘金浏览器兼容

支付宝

微信