浏览器兼容问题和webapp

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

二：获取事件对象： document.onclick=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;