关于浏览器兼容问题的解决办法

目前，最为流行的浏览器共有五个：分别是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     }