浏览器兼容问题和webapp-白红宇

css3:!important声明的样式优先级最高,ie6不支持，覆盖页面内任何位置定义的元素样式，一：dom中绑定事件事件 dom0级绑定：兼容所有浏览器，dom0.οnclick=function(){} dom2级：dom0.addEventListener('click',function(){}), ie浏览器：dom0.attachEvent('click',function(){})

二：获取事件对象： document.οnclick=function(e){ var evt=e||window.event; console.log(e); }; ie:用window.event; 三：ajax请求时：创建兼容的xhr对象 function createXHR(){ var xhr; try { xhr = new XMLHttpRequest(); } catch (e) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xhr = false; } } } return xhr; } var xhr = createXHR(); 四：获取浏览器窗口尺寸 var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 不包括工具栏和滚动条五：一些h5标签： [if lte ie8] document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); [endif] 六：盒模型兼容：ie8及更早ie版本不支持填充的宽度和宽度属性，解决办法在文档开头加 css3中.lang伪类IE8必须声明<!DOCTYPE>才能支持;lang伪类。七：webapp: 1：移动端事件 overflow-y：scroll:让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁。八：

九：判断浏览器类型： if(navigator.userAgent.indexOf('Opera') != -1) { 	alert('Opera'); } else if(navigator.userAgent.indexOf('MSIE') != -1) { 	alert('Internet Explorer'); } else if(navigator.userAgent.indexOf('Firefox') != -1) { 	alert('Firefox'); } else if(navigator.userAgent.indexOf('Netscape') != -1) { 	alert('Netscape'); } else if(navigator.userAgent.indexOf('Safari') != -1) { 	alert('Safari'); } else{ 	alert('无法识别的浏览器。'); }h5页面尝试调用app,提示是否打开手机中app,const iframe = document.createElement('iframe');iframe.src = 'URL scheme'; // URL scheme的方式跳转iframe.style.display = 'none';document.body.appendChild(iframe);调用失败时：const timer = 1000;复制代码

setTimeout(function() { // 执行成功后移除iframe document.body.removeChild(iframe);

//setTimeout小于2000通常认为是唤起APP失败 if (Date.now() - last < 2000) {        // 执行失败函数        // 这里需要考虑一下之前知乎遇到的那个问题（浏览器询问导致时间小于2S）} else {       //  执行成功函数    }}, timer);    在iframe被拦截的情况下，使用window.location.href = URL scheme来做兼容。 复制代码

HTML注释在IE6中的BUG 如果两个浮动元素之间存在注释，那么可能导致布局错位或文字的BUG。这种情况，我们通常将注释去掉 css中的margin:除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。 css中的zoom的作用是放大为原来的2倍，火狐浏览器不支持zoom属性， css中opacity属性兼容ie8及更早版本filter:alpha(opacity=100); opacity:1.0;