浏览器兼容性编程简介

浏览器兼容性编程简介 2012年10月15日王明建

浏览器类型和差异性 • 关键接口window.navigator.userAgent • 差异太多，每个人很难了解全部 • 遇到一个解决一个是基本思路 • 使用框架能解决常见的差异性 • 如果判断一个问题是否浏览器差异性很关键

DOM元素盒子模型 • 对象的实际宽度 • IE/Opera：=(margin-left)+width+(margin-right) • Firefox/Mozilla：=(margin-left)+(border-left-width)+(padding-left)+width+(padding-right)+(border-right-width)+(margin-right) • 盒子模型本质是一个规范定义上的缺陷，WEB开发人员背负的沉重包袱。

CSS Hack • 原理是不同浏览器对CSS代码文件解析的差异 • 仅用于解决界面的差异性问题 • 不利于维护，不宜被滥用 • 将逐步被新技术替代或封装(less,sass) • .xx{width:2px !important;*width:1px;} • .yy{filter:Alpha(Opacity=50);-webkit-opacity:0.5;-moz-opacity:0.5;}

HTML布局差异 • 默认流布局 • float布局 • 盒子模型计算问题 • 文本溢出问题(text-overflow) • 左右布局和内容溢出问题 • inline-block问题

JS逻辑做兼容 • 通过if-else分支来区分不同的浏览器 • 属性探测：document.all,window.event等 • JS条件编译(@cc_on,@if,@set等) • CSS属性探测DOM属性、方法探测JS属性、方法探测 • HTML条件注释

DOM事件的差异 • a.onclick = function(ev){ev || (ev = window.event);var target = ev.srcElement || ev.target;ev.preventDefault(); //ev.returnValue = 0;ev.stopPropagation(); //ev.cancelBubble=true; return false;}; • ev.keyCode • ev.button

DOM访问差异 • 多余的文本节点问题 • onload与onreadystatechange • IE6终止错误(本质是appendChild问题) • ie:styleFloat,webkit:cssFloat

AJAX的差异 • new XMLHttpRequest() • new ActiveXObject("Microsoft.XMLHTTP"); • xhr.send(“”); • xhr.responseXML • !IE下服务端保证:Content-Type: text/xml • IE下浏览器里：varxmlDoc = new ActiveXObject("Msxml.DOMDocument");xmlDoc.async = false;xmlDoc.loadXML(text);

总结 • 差异无处不在，遇到问题->查资料 • 优雅降级策略 • JS逻辑是最终的保底方案 • JS库封装基础差异 • 组件封装UI差异

谢谢！

浏览器兼容性编程 简介