整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1.1 介紹
福哥最近處理一個客戶的網站JS錯誤發現了一個詭異的情況，就是前面載入了一個JQ的插件，后面調用這個插件，提示插件不是一個函數。
經過一頓查詢，發現載入插件的地方有個“defer”屬性，查資料得知這個屬性告知瀏覽器在全部網頁都加載完成之后再加載這個插件代碼。
我去，全部加載完成之后再加載插件代碼，那么這里調用插件肯定失敗啊~~
正常模式下，先加載jquery庫，后打印版本信息，一切順利~~
2.1 代碼
<script type="text/javascript" src="http://sample.com/js/jquery.js"></script>
<script>
console.log(jQuery.fn.jquery);
</script>2.2 效果
3.1 代碼
現在給加載jquery庫使用延遲模式，再來打印版本信息，報錯了。
因為打印版本信息的時候jquery庫還沒有加載，當然是找不到了。
<script type="text/javascript" src="http://sample.com/js/jquery.js" defer></script>
<script>
console.log(jQuery.fn.jquery);
</script>3.2 效果
要解決這個問題，需要將代碼放入頁面加載完成后的位置執行，這里使用的是onreadystatechange事件判斷的頁面加載狀態（因為jQuery被延遲了，只能用原生JS了）。
4.1 代碼
<script type="text/javascript" src="http://sample.com/js/jquery.js" defer></script>
<script>
document.onreadystatechange = function () {
if(this.readyState == "complete"){
console.log(jQuery.fn.jquery);
}
};
</script>福哥今天給大家講解了關于HTML的延遲加載屬性defer的相關知識，使用延遲加載可以“提高頁面加載速度”，讓用戶直觀上感覺頁面速度比較快！但是，如果使用不當就會造成JS代碼錯誤的問題。
https://m.tongfu.net/home/35/blog/512979.html
Microsoft Edge 的最新 Dev 頻道版本中，微軟放出了增強手寫輸入的預覽版。在 Build 2021 開發者大會上，微軟首次介紹了這些增強功能，展示了這個全新網絡 API（已在 Chromium 開源項目的上游實現）是如何大大減少物理手寫筆的筆尖和手寫在屏幕上繪制時的延遲。
在 Windows11 最新預覽版中，微軟表示手寫延遲改善了 240%，下面動圖中綠色部分為增強手寫輸入，可以看到延遲得到了明顯改進，讓屏幕響應更快更跟手寫筆輸入。
技術細節
微軟解釋道目前基于 Chromium 的瀏覽器中，手寫筆事件首先發送到瀏覽器進程，而瀏覽器進程又將這些事件轉發到 Web 應用程序的 JavaScript 事件循環。瀏覽器進程收到這些事件和它們到達應用程序之間的時間延遲有時會很明顯，這取決于主線程的其他部分，從而導致在手寫時出現延遲。
為了改善這一點，在 Windows 11 上的 InkPresenter 實現的基礎上，Microsoft Edge 正在使用一個新的 Windows API，它將直接與操作系統的合成器合作，在 Microsoft Edge 的應用程序循環之外繪制額外的筆觸。由于這個API，我們不用等待通過JavaScript將事件傳遞給網絡應用，而是可以在收到這些點后立即將其提供給操作系統的合成器。然后，合成器可以用墨水筆畫將這些點連接起來，并在要呈現在屏幕上的下一幀中繪制這些筆畫，大大減少了延遲。
對于像 Windows 10 和 Linux 這樣沒有這個 API 的操作系統，在 Microsoft Edge 中直接實現的 polyfill 將接管并為最后一個已知的可信任的PointerEvent之外的墨水筆觸提供預測性渲染。這個實現的目的是與Windows 11的API類似--它利用瀏覽器所知道的點，以及一些預測的點，在最后一刻為應用程序的筆跡畫出一個擴展。雖然效果沒有Windows 11 API那么強大，但它仍然可以為用戶提供更多的體驗!
今天就來聊聊在為了您更好的體驗，本文章聊聊如何僅支持谷歌瀏覽器訪問查看頁面？這篇文章中提到的瀏覽器兼容問題，以此篇文章來證明自己并非不了解瀏覽器兼容性問題，而是當時其他因素導致選擇了一刀切的方法來處理需求（我就是一個不粘鍋）。
嘿，xdm~既然點進來了，不妨就繼續看下去吧^_^
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。
上面的定義就是大白話，我們來看看來自百度百科的權威解釋：瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和制作中，做好瀏覽器兼容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發和設計，瀏覽器對標準的更好兼容能夠給用戶更好的使用體驗。
造成瀏覽器兼容性問題的根本原因就是各瀏覽器使用了不同的內核，并且它們處理同一件事情的時候思路不同。
怎么理解上述文字？即：不同瀏覽器使用的內核及所支持的HTML等網頁語言標準不同，以及用戶客戶端的環境不同（如分辨率不同）造成了顯示效果不能達到理想效果。
前端開發經常需要檢查瀏覽器的兼容性，這里推薦(Can I Use)這個查詢網站。它是一個針對前端開發人員定制的一個查詢CSS、JS、HTML5、SVG在主流瀏覽器中特性和兼容性的網站，可以很好的保證網頁在瀏覽器中的兼容性。有了這個工具我們就可以快速地了解到代碼在各個瀏覽器中的兼容情況了，強烈推薦一波，大家趕緊去體驗吧?！界面效果如下圖所示：
工具只能給我們顯示查詢的特性在不同瀏覽器上的兼容情況，至于如何解決兼容問題還得看下述的解決辦法→
1、不同瀏覽器的標簽默認的內外邊距不同
解決方案：*{margin: 0; padding: 0;}
其實清除瀏覽器自帶的默認樣式，每個前端開發者所用的方法大同小異，這里給出我選用的清除默認樣式的重置樣式代碼：
/**
* 該文件用于清除瀏覽器樣式
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
padding:0;
margin:0;
border:0;
outline: 0;
font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
word-wrap:break-word;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
ul, ol {
list-style-type: none;
}
textarea {
resize: none;
}
/*去除input button默認樣式*/
input, button, textarea {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 225, 225, 0);
padding: 0;
border: 0;
outline: 0;
}
// 修改placeholder屬性默認文字顏色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999;
}除了自己定義清除默認樣式的代碼，也可選擇引用別人寫好的成熟插件Normalize.css來清除默認樣式；
2、圖片加a標簽在IE9中會有邊框
解決方案：img{border: none;}
3、IE6及更低版本浮動元素，浮動邊雙倍邊距
解決方案：不使用margin，使用padding
4、IE6及更低版本中，部分塊元素擁有默認高度
解決方案：給元素設置font-size: 0;
5、a標簽藍色邊框
解決方案：a{outline: none;}
6、IE6不支持min-height屬性
解決方案：{min-height: 200px; _height: 350px;}
7、IE9以下瀏覽器不能使用opacity
解決方案：Firefox/Chrome/Safari/Opera瀏覽器使用opacity；IE瀏覽器使用filter
opacity: 0.7; /*FF chrome safari opera*/
filter: alpha(opacity:70); /*用了ie濾鏡,可以兼容ie*/8、IE6/7不支持display:inline-block
解決方案：{display: inline-block; *display: inline;}
9、cursor兼容問題
解決方案：統一使用{cursor: pointer;}
10、IE6/7中img標簽與文字放一起時，line-height失效的問題
解決方案：文字和<img>都設置float
11、table寬度固定，td自動換行
解決方案：table設置 {table-layout: fixed}，td設置 {word-wrap: break-word}
12、相鄰元素設置margin邊距時，margin將取最大值，舍棄小值
解決方案：不讓邊距重疊，可以給子元素加一個父元素，并設置該父元素設置：{overflow: hidden}
13、a標簽css狀態的順序
解決方案：按照link--visited--hover--active的順序編寫
14、IE6/7圖片下面有空隙的問題
解決方案：img{display: block;}
15、ul標簽在Firefox中默認是有padding值的，而在IE中只有margin有值
解決方案：ul{margin: 0;padding: 0;}
16、IE中li指定高度后，出現排版錯誤
解決方案：設置line-height
17、ul或li浮動后，顯示在div外
解決方案：清除浮動；須在ul標簽后加<div style="clear:both"></div>來閉合外層div
18、ul設置float后，在IE中margin將變大
解決方案：ul{display: inline;}，li{list-style-position: outside;}
19、li中內容超過長度時，用省略號顯示
li{
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}20、div嵌套p時，出現空白行
解決方案：li{display: inline;}
21、IE6默認div高度為一個字體顯示的高度
解決方案：{line-height: 1px;}或{overflow: hidden;}
22、在Chrome中字體不能小于10px
解決方案：p{font-size: 12px; transform: scale(0.8);}
23、谷歌瀏覽器上記住密碼后輸入框背景色為黃色
input{
background-color: transparent !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
-webkit-text-fill-color: #333 !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
background-color: transparent !important;
background-image: none !important;
transition: background-color 5000s ease-in-out 0s;
}24、CSS3兼容前綴表示
寫法 | 內核 | 瀏覽器 |
-webkit- | webkit渲染引擎 | chrome/safari |
-moz- | gecko渲染引擎 | Firefox |
-ms- | trident渲染引擎 | IE |
-o- | opeck渲染引擎 | Opera |
如：
.box{
height: 40px;
background-color: red;
color: #fff;
-webkit-border-radius: 5px; // chrome/safari
-moz-border-radius: 5px; // Firefox
-ms-border-radius: 5px; // IE
-o-border-radius: 5px; // Opera
border-radius: 5px;
}1、事件對象的兼容
e=ev || window.event
2、滾動事件的兼容
scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
3、阻止冒泡的兼容
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble=true;
}4、阻止默認行為的兼容
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue=false;
}5、添加事件監聽器的兼容
if (target.addEventListener) {
target.addEventListener("click", fun, false);
} else {
target.attachEvent("onclick", fun);
}6、ajax創建對象的兼容
var xhr=null；
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject("Microsoft XMLHTTP");
} 7、鼠標按鍵編碼的兼容
function mouse (ev) {
var e=ev || window.event;
if (evt) {
return e.button;
} else if (window.event) {
switch (e.button) {
case 1: return 0;
case 4: return 1;
case 2: return 2;
}
}
}8、在IE中，event對象有x，y屬性，Firefox中與event.x等效的是event.pageX，而event.pageX在IE中又沒有
x=event.x ? event.x : event.pageX;
9、在IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，event對象有target屬性，但是沒有srcElement屬性
var source=ev.target || ev.srcElement;
var target=ev.relatedTarget || ev.toElement;10、在Firefox下需要用CSS禁止選取網頁內容，在IE用JS禁止
-moz-user-select: none; // Firefox
obj.onselectstart=function() {return false;} // IE11、innerText在IE中能正常工作，但在FireFox中卻不行
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText="IE";
} else {
document.getElementById('element').textContent="Firefox";
}12、在Firefox下，可以使用const關鍵字或var關鍵字來定義常量；在IE下，只能使用var關鍵字來定義常量
解決方案：統一使用var關鍵字來定義常量
1、禁止iOS識別長串數字為電話
解決方案：<meta content="telephone=no" name="format-detection" />
2、禁止iOS彈出各種操作窗口
解決方案：-webkit-touch-callout:none
3、禁止Android手機識別郵箱
解決方案：<meta content="email=no" name="format-detection" />
4、禁止iOS和Android用戶選中文字
解決方案：-webkit-user-select:none
5、iOS下取消input在輸入的時候英文首字母的默認大寫
解決方案：<input autocapitalize="off" autocorrect="off" />
6、Android下取消輸入語音按鈕
解決方案：input::-webkit-input-speech-button {display: none}
7、在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效
解決方案：* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
8、iOS下input為type=button屬性disabled設置true，會出現樣式文字和背景異常問題
解決方案：使用opacity=1;
9、input為fixed定位，在iOS下input固定定位在頂部或者底部，在頁面滾動一些距離后，點擊input(彈出鍵盤)，input位置會出現在中間位置
解決方案：內容列表框也是fixed定位，這樣不會出現fixed錯位的問題
10、移動端字體小于12px使用四周邊框或者背景色塊，部分安卓文字偏上bug問題
解決方案：可以使用整體放大1倍(width、height、font-size等等)，再使用transform縮放
11、在移動端圖片上傳圖片兼容低端機的問題
解決方案：input 加入屬性accept="image/*" multiple
12、在Android上placeholder文字設置行高會偏上
解決方案：input有placeholder情況下不要設置行高
13、overflow: scroll或auto；在iOS上滑動卡頓的問題
解決方案:加入-webkit-overflow-scrolling: touch;
14、iOS中日期如：2022-02-22 00:00:00格式的時間轉時間戳不成功
解決方案：需要將時間中的'00:00:00去除之后才能轉為時間戳'
15、iOS中需要將時間格式轉為/，如：2022/02/22
let date='2022-02-22';
let dateStr=date.replace(/-/g, '/'); // 2022/02/2216、移動端click300ms延時響應
解決方案：使用Fastclick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );17、移動端1px邊框問題
解決方案：原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale縮小一半，原先的元素相對定位，新做的border絕對定位
.border-1px{
position: relative;
border:none;
}
.border-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}至此，關于瀏覽器兼容性問題的相關知識和解決方案就聊完了，最后還穿插了關于移動端兼容的問題描述，肯定還有很多沒有總結到的兼容性問題，希望xdm在下方評論↘提供。
看文至此，順手點個贊再走唄，3Q^_^
伙伴們，如果覺得本文對你有些許幫助，點個或者?個關注在走唄^_^ 。另外如果本文章有問題或有不理解的部分，歡迎大家在評論區評論指出，我們一起討論共勉。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
