【前端兼容性】常见的浏览器兼容问题及解决方案
常見瀏覽器兼容
- 前言
- 一、常見瀏覽器內核
- 1.Trident內核
- 2.Gecko內核
- 3.Blink內核
- 4.Webkit內核
- 5.Presto內核(已廢棄)
 
 
- 二、常見兼容性問題
- 1.不同瀏覽器的默認margin和padding不一致
- 2.圖片的默認間距不一致
- 3.獲取視口的寬高
- 4.SVG(兼容IE8)
- 5.Canvas(兼容IE8)
- 6.IE9以下不能用opacity
- 7.文字大小
- 8.綁定事件IE9才支持
- 9.cursor:hand 顯示手型
- 10.const問題
- 11.event.srcElement問題
- 12.Firefox不支持innerText
- 13.獲取鼠標在頁面上的位置
- 14.獲取鍵盤事件的鍵值
- 15.IE6不支持min-height
- 16.IE兼容CSS3的background-size屬性
 
 
- 總結
 
前言
??現今市面上的瀏覽器種類繁多,而前端開發過程中所用到的一些功能屬性不可能兼容所有瀏覽器,因此就需要解決瀏覽器的兼容問題。(PS:死亡要求——兼容IE瀏覽器(ノ=▼ω▼=)ノ┴─┴)。
一、常見瀏覽器內核
1.Trident內核
??說起Trident,大部分人都會覺得比較陌生,但提起IE瀏覽器基本上是家喻戶曉。由于該內核被包含在全世界最高的使用率的操作系統中,即為Windows操作系統,所以我們又經常把它稱之為IE內核。
 ??由于IE本身的“壟斷性”(雖然名義上IE并非壟斷)而使得Trident內核的長期一家獨大,微軟很長時間都并沒有更新Trident內核,這導致了兩個后果——①Trident內核曾經幾乎與W3C標準脫節(2005年);②是Trident內核的大量Bug等安全性問題沒有得到及時解決,然后加上一些致力于開源的開發者和一些學者們公開自己認為IE瀏覽器不安全的觀點,也有很多用戶轉向了其他瀏覽器,Firefox和Opera就是這個時候興起的。
- 補充:IE從版本11開始,初步支持WebGL技術。IE8的JavaScript引擎是Jscript,IE9開始用Chakra,這兩個版本區別很大,Chakra無論是速度和標準化方面都很出色。
2.Gecko內核
??Gecko(Firefox內核):Netscape6開始采用的內核,后來的Mozilla FireFox(火狐瀏覽器) 也采用了該內核,Gecko的特點是代碼完全公開,因此,其可開發程度很高,全世界的程序員都可以為其編寫代碼,增加功能。因為這是個開源內核,因此受到許多人的青睞,Gecko內核的瀏覽器也很多,這也是Gecko內核雖然年輕但市場占有率能夠迅速提高的重要原因。
 ??此外Gecko也是一個跨平臺內核,可以在Windows、 BSD、Linux和Mac OS X中使用。
3.Blink內核
??Blink是一個由Google和Opera Software開發的瀏覽器排版引擎,Google計劃將這個渲染引擎作為Chromium計劃的一部分,并且在2013年4月的時候公布了這一消息。這一渲染引擎是開源引擎WebKit中WebCore組件的一個分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex瀏覽器中使用。
4.Webkit內核
??Webkit(Safari內核,Chrome內核原型,開源):它是蘋果公司自己的內核,也是蘋果的Safari瀏覽器使用的內核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是從KDE的KHTML及KJS引擎衍生而來,它們都是自由軟件,在GPL條約下授權,同時支持BSD系統的開發。所以Webkit也是自由軟件,同時開放源代碼。在安全方面不受IE、Firefox的制約,所以Safari瀏覽器在國內還是很安全的。
5.Presto內核(已廢棄)
??Presto(Opera前內核) : Opera12.17及更早版本曾經采用的內核,現已停止開發并廢棄,該內核在2003年的Opera7中首次被使用,該款引擎的特點就是渲染速度的優化達到了極致,然而代價是犧牲了網頁的兼容性。實際上這是一個動態內核,與前面幾個內核的最大的區別就在腳本處理上。
| IE瀏覽器 | Trident內核,也是俗稱的IE內核 | 
| Chrome瀏覽器(谷歌) | 統稱Chromium內核或Chrome內核。以前是Webkit內核,現在是Blink內核 | 
| Firefox瀏覽器(火狐) | Gecko內核,俗稱Firefox內核 | 
| Safari瀏覽器 | Webkit內核 | 
| Opera瀏覽器(歐朋) | 最初是自己的Presto內核,后來是Webkit內核,現在是Blink內核 | 
| 360瀏覽器 | IE+Chrome雙內核 | 
| 獵豹瀏覽器 | IE+Chrome雙內核 | 
| UC瀏覽器 | Trident(兼容模式)+Webkit(高速模式) | 
| 搜狗瀏覽器 | Trident(兼容模式)+Webkit(高速模式) | 
| 百度瀏覽器 | IE內核 | 
| 2345瀏覽器 | IE內核 | 
| QQ瀏覽器 | Trident(兼容模式)+Webkit(高速模式) | 
| 遨游瀏覽器 | Trident(兼容模式)+Webkit(高速模式) | 
| 世界之窗瀏覽器 | 最初為IE內核,2013年采用IE+Chrome雙內核 | 
二、常見兼容性問題
1.不同瀏覽器的默認margin和padding不一致
- 解決方案
 在style樣式里添加如下代碼:
【PS】:這是最常見也是最容易解決的兼容性問題了~
2.圖片的默認間距不一致
- 解決方案
 使用float屬性為img布局
3.獲取視口的寬高
- 解決方案
 ①大部分瀏覽器:
??②IE8、7、6、5:
var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; //或者 var w = document.body.clientWidth; var h = document.body.clientHeight;4.SVG(兼容IE8)
- 解決方案
 ?標簽降級
【PS】:但是呈現的效果沒那么好(兼容你x的IE8(▼皿▼#) ~)
 
 ahhhh,(ノ ̄▽ ̄)開個玩笑~~
5.Canvas(兼容IE8)
??canvas是H5新增的元素,IE 從 IE9 開始支持canvas,那么如何兼容 IE8 呢?
- 解決方案
 ?①添加對HTML5的支持(去網上下載一個html5.js,很容易搜到的~)
??②添加對canvas的支持(下載excanvas_r3.zip)
<script src="../excanvas.compiled.js" type="text/javascript"></script>??③支持CSS3(http://css3pie.com)
<style>#nav{//一些樣式...-webkit-border-radius: 10px; //兼容Safari和Chrome瀏覽器-moz-border-radius: 10px; //兼容Firefox瀏覽器behavior: url(PIE.htc);} </style>6.IE9以下不能用opacity
- 解決方案
 使用filter:
7.文字大小
??字體大小在不同瀏覽上不一致。例如font-size:14px,在 IE 中的實際行高是16px,下面有3px留白;在 Firefox 中的實際行高是17px,下面有3px留白,上邊1px留白;在 opera 中就更不一樣了。
- 解決方案
 統一指定行高 line-height:
8.綁定事件IE9才支持
- 解決方案
 addEventListener屬性 & attachEvent屬性:
【PS】
 ??①addEventListener事件回調函數中的 this 指向綁定事件的對象;attachEvent事件回調函數中的 this 指向的是window,需要統一兩個方法的this。
 ??②addEventListener有第三個參數,true表示事件工作在捕獲階段,false為冒泡階段(默認);而attachEvent只能工作在冒泡階段。
 ??③解除事件方法標準方法removeListen();在IE8中,對應使用detachEvent();注意,和上面的注冊方法要一一對應。
 ??④阻止默認事件標準方法event.preventDefault();在IE8中,使用 event.returnValue = false;
 ??⑤阻止冒泡的方法event.stopPropagation();在IE8中,使用 event.cancelBubble = true;
 ??⑥老版本 IE 中,事件函數內部的 this 不是被監聽元素本身,而是 window,故應該使用 call 改變 this 指向。
 ??⑦addEventLister的第一個參數事件類型是不加“on”前綴的;而attachEvent中需要加“on”前綴;
 
9.cursor:hand 顯示手型
??Firefox、Safari不支持hand,但IE支持pointer。
- 解決方案
 統一使用 cursor:pointer;
10.const問題
??Firefox下,可以使用const關鍵字來定義常量;IE下,只能使用var關鍵字來定義常量。
- 解決方案
 統一使用var關鍵字來定義常量。
11.event.srcElement問題
??IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,event對象有target屬性,但是沒有srcElement屬性。
- 解決方案
 使用srcObj = event.srcElement ? event.srcElement : event.target;
12.Firefox不支持innerText
- 解決方案
 使用textContent:
13.獲取鼠標在頁面上的位置
??IE8之前沒有完整的位置屬性。
- 解決方案
14.獲取鍵盤事件的鍵值
- 谷歌:對event.keyCode、event.charCode和event.which都兼容。
- 火狐:對event.keyCode部分鍵值有效(如上下左右鍵),對數字鍵、字母鍵無效;
 ???event.which部分鍵值有效(如字母、數字鍵),對上下左右鍵、PgUp(33)、PgDn(34)鍵無效;
 ???event.charCode部分鍵值有效(如字母、數字鍵),對enter鍵、上下左右鍵、PgUp(33)、PgDn(34)鍵無效。
- IE:IE8及以下對event.charCode無效,event.keyCode和event.which能獲取大部分。
- 解決方案
15.IE6不支持min-height
- 解決方案
16.IE兼容CSS3的background-size屬性
??IE8以下不支持CSS3的background-size屬性。
- 解決方案
 ①使用濾鏡:
②通過htc文件(background-size polyfill):
<style> .box{background-size: cover;behavior: url(../backgroundsize.min.htc);-ms-behavior: url(../backgroundsize.min.htc); } </style>總結
??實際生活中的兼容性問題還有很多,先記到這里~
 ??另:部分內容參考——https://www.cnblogs.com/angel648/p/11392262.html
總結
以上是生活随笔為你收集整理的【前端兼容性】常见的浏览器兼容问题及解决方案的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: delphi java aes_Delp
- 下一篇: Linux下3种常用的网络测速工具简介
