关于浏览器兼容问题的解决办法，全部都在这里了
目前，最为流行的浏览器共有五个：分别是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 }
这些代码目前只是更新到这儿，以后还会陆续更新跟多关于浏览器兼容问题更多思路和见解。
精彩内容，扫描二维码获取更多内容：
