词条信息

admin
admin
超级管理员
词条创建者 发短消息   

相关词条

热门词条

更多>>
面试官是怎么快速判断程序员能力的?
技术面试是一个工程师成长到一定阶段后必然要承担的一项工作,优秀的技术面试官能帮助公司筛选出优秀的工程师,并且潜...
支付宝、京东、美团、去哪儿的支付系统架构整体设计详解
十年风雨!看蚂蚁金服SOFA 分布式架构演进作者:一杯甜酒支付产品模块是按照支付场景来为业务方提供支付服务。这...
图解:直播平台整体架构
直播平台整体架构视频直播链路视频流转换成不同清晰度不同的端,不同的网络环境,需要不同码率,以保流畅播放器的基本...
CentOS 7下安装Nextcloud搭建个人网盘
本文只作测试之用,生产环境还要严格进行安全配置。[linuxidc@localhost ~]$&nb...
Excel常用函数的组合使用
Excel中的函数公式非常的强大,全部掌握很显然是不现实的,但是对常用的Excel函数公式,我们必须掌握。...
解决网 >>所属分类 >> 网页设计    用户体验   

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

标签: 浏览器 兼容

顶[0] 发表评论(0) 编辑词条

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

 

 

本文地址:解决网 http://www.solves.com.cn/doc-view-4933.html

TAGS:SOLVES , 电脑技术 , 电脑知识 , 网站建设, 电脑百科, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇重装win7系统的方法有哪些
下一篇如何保证网站的安全性?

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的百科词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>