瀏覽器相容問題和webapp

redhack發表於2017-09-19
瀏覽器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;

相關文章