关于浏览器兼容问题的解决办法，全部都在这⾥了
⽬前，最为流⾏的浏览器共有五个：分别是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--->任意⽂本内容
5function setInnerText(element,text) {
6if(typeof (Content)=='undefined'){//是IE8浏览器
7 element.innerText=text;
8 }else{
9//浏览器⽀持textContent这个属性
10 Content=text;
11 }
12 }
13
14
15//获取任意元素中的⽂本内容
16function getInnerText(element) {
17if(typeof (Content)=="undefined"){
18//如果浏览器不⽀持textContext这个属性则返回innerText的值
19return element.innerText;
20 }else{
21//如果浏览器⽀持textContext属性，则直接返回该属性的值
Content;
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&&deType!=1){//判断节点存在并且不是标签
10 10 Sibling;//继续当前节点的下⼀个节点
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;
chrome浏览器官方
23 28 }else{
24 29 //获取当前元素的最后⼀个⼦节点
25 30 var node=element.lastChild;
26 31 while (node&&deType!=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&&deType!=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 ElementSibling){
52 63 ElementSibling
53 64 }else{
54 65 var Sibling;
55 66 while (node&&deType!=1){
56 67 Sibling;
57 68 }
58 69 return node;
59 70 }
60 71 }
这些代码⽬前只是更新到这⼉，以后还会陆续更新跟多关于浏览器兼容问题更多思路和见解。精彩内容，扫描⼆维码获取更多内容：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论