目前，最為流行的瀏覽器共有五個：分別是ie,Edge瀏覽器（屬於微軟），火狐，谷歌（chrome）Safari和Opera五大瀏覽器。
這五大瀏覽器分別有各自的瀏覽器內核，下面介紹以下各個瀏覽器的內核（包括一些國內的瀏覽器）：
Trident內核：IE ，360，，獵豹，百度；
Gecko內核：火狐----------->這個瀏覽器內核是開源的瀏覽器內核，插件非常多，-------------->缺點：打開速度慢（加載flash插件）<-----額外介紹----->。
Webkit:遨游，蘋果 ，symbian；
Bink:chrome瀏覽器，大部分國產瀏覽器最新版本都采用Blink；
由於這些瀏覽器的內核不相同，因此，他們的對編輯頁面的一些屬性的支持也有所不同，接下來，我就談一談在解決瀏覽器兼容方面的見解：
首先是關於innerText和textContent的問題的見解：
innerText 谷歌，火狐和IE8都支持
低版本 的火狐不支持innerText
textContent在IE8中的結果是undefined；
textContent在谷歌和火狐中支持；
這些內容是必須知道的，也是以后解決兼容性問題的引子或者思路，同時也是基礎。
在解決瀏覽器兼容性的問題上面，首先，可以通過獲取瀏覽器的版本來判斷這個瀏覽器是不是支持這個屬性，但是這種辦法非常的麻煩。
具體做法是：我要在一系列的信息中找到這個瀏覽器版本里面的具體是什么樣的，然后用正則表達式去匹配，然后確定這個瀏覽器里面具體用的什么東西。這就是整個的內容，所以，相當的麻煩。
當然，獲取瀏覽器版本的代碼很簡單，就一句話，一行代碼，但是僅僅是為了判斷這個瀏覽器是不是支持這個屬性 ，是不是放在這里好像有點兒大材小用了。因此，就直接判斷這個瀏覽器里面是不是支持這個屬性就可以了。
為了解決這個不兼容的問題，我們可以編輯以下代碼來解決上述問題：
1 //任意元素都可以設置成文本內容----------因此把“任意”元素當成對象（element）傳遞到函數中 2 3 //element---->任意元素 4 //text--->任意文本內容 5 function setInnerText(element,text) { 6 if(typeof (element.textContent)=='undefined'){//是IE8瀏覽器 7 element.innerText=text; 8 }else{ 9 //瀏覽器支持textContent這個屬性 10 element.textContent=text; 11 } 12 } 13 14 15 //獲取任意元素中的文本內容 16 function getInnerText(element) { 17 if(typeof (element.textContent)=="undefined"){ 18 //如果瀏覽器不支持textContext這個屬性則返回innerText的值 19 return element.innerText; 20 }else{ 21 //如果瀏覽器支持textContext屬性,則直接返回該屬性的值 22 return element.textContent; 23 } 24 }
上述代碼就可以解決innnerText和textContent在各個瀏覽器之間不兼容的問題（上述代碼目前只在谷歌，火狐，IE8版本上面測試，以后還會在其他的瀏覽器的不同版本上面測試，測試結果還會不斷的更新，盡請期待）。
上面介紹的內容只闡述部分屬性在各個瀏覽器上面的差異，當然，還有其他的兼容問題存在，他們分別是：
（1）獲取某個元素中的第一個子元素
（2）獲取某個元素中的最后一個子元素
（3）獲取某個元素的前一個兄弟元素
（4）獲取某個元素的后一個兄弟元素
下面，我分別給出了相應的兼容性問題解決辦法代碼：
1 1 //獲取某個元素中的第一個子元素 2 2 function getFirstElement(element) { 3 3 if(element.firstElementChild){ 4 4 //如果瀏覽器支持這個屬性就直接返回第一個子元素 5 5 return element.firstElementChild; 6 6 }else{ 7 7 //如果瀏覽器不支持這個firstElementChild屬性,先獲取傳入進來的父級元素中的第一個子節點 8 8 var node=element.firstChild;//先獲取這個節點 9 9 while (node&&node.nodeType!=1){//判斷節點存在並且不是標簽 10 10 node=node.nextSibling;//繼續找當前節點的下一個節點 11 11 } 12 12 return node; 13 13 } 14 14 } 15 20 //下面這連個屬性在各個不同的瀏覽器中顯示的方式有所不同 16 21 //my$("uu").firstChild 17 22 //my$("uu").firstElementChild 18 23 19 24 //獲取某個元素中的最后一個子元素 20 25 function getLastElement(element) { 21 26 if(element.lastElementChild){ 22 27 return element.lastElementChild; 23 28 }else{ 24 29 //獲取當前元素的最后一個子節點 25 30 var node=element.lastChild; 26 31 while (node&&node.nodeType!=1){ 27 32 node=node.previousSibling; 28 33 } 29 34 return node; 30 35 } 31 36 } 32 33 44 34 45 //獲取某個元素的前一個兄弟元素 35 46 function getPreviousElement(element) { 36 47 if(element.previousElementSibling){ 37 48 return element.previousElementSibling 38 49 }else{ 39 50 var node=element.previousSibling; 40 51 while (node&&node.nodeType!=1){ 41 52 node=node.previousSibling; 42 53 } 43 54 return node; 44 55 } 45 56 } 46 57 47 58 48 59 49 60 //獲取某個元素的后一個兄弟元素 50 61 function getNextElement(element) { 51 62 if(element.nextElementSibling){ 52 63 return element.nextElementSibling 53 64 }else{ 54 65 var node=element.nextSibling; 55 66 while (node&&node.nodeType!=1){ 56 67 node=node.nextSibling; 57 68 } 58 69 return node; 59 70 } 60 71 }
這些代碼目前只是更新到這兒，以后還會陸續更新跟多關於瀏覽器兼容問題更多思路和見解。
精彩內容，掃描二維碼獲取更多內容：
