瀏覽器兼容問題和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;