正常访问状态！ 设为首页 | 加入收藏夹 | 浏览历史  
  http://www.guosp.com
 碧海澜涛居
  海纳百川，有容乃大。壁立千刃，无欲则刚！
 
 
关键词：
  网站首页 | 关于本站 | 技术资料 | 美文日志 | 读书收藏 | 影视收藏 | 软件收藏 | 摄影相册| 留言板 
  技术资料 >> 网页制作 关闭(快捷键alt+C)
搜索标签： 兼容性 浏览器
浏览器兼容性问题-JS&DOM
[阅读次数：1611次]  [发布时间：2011年6月13日]
　　 一、JS与DOM的兼容性：

　　(一) DOM节点的访问：

　　1.以前对DOM节点访问一般用“document.Bll.元素ID属性值”或“document.元素ID属性值”这类简化的方法，在FireFox中有时候不支持此方法。

　　解决办法：标准的方法为“document.getElementById(‘元素ID属性值’)”或“document.getElementByName(‘元素Name属性值’)[0]”或“document.getElementByTagName(‘元素标签名’)[0]”；

　　2.集合类对象的()与[]的问题：以前的代码中很多集合类对象的访问施用()，IE可以正常解析，FireFox不支持。

　　解决办法：改用[]作为下标符号。如：document.Forms(‘FormName’)改成document.Forms[‘FormName’]；又如：document.getElementsByName(‘元素Name属性值’)(1)改成document.getElementsByName(‘元素Name属性值’)[1]；

　　3.document.Form.Item的问题：FireFox不能正常解析形如：document.FormName.Item("ItemName")这样的语句,但IE与FireFox都支持document.FormName.Elements["ElementName"]。

　　解决办法：改用如下语句形式：document.FormName.Elements["ElementName"]；

　　4.在IE中，可以利用eval_r(‘元素ID属性值’)的方法取得改HTML对象，FireFox不支持此种对象访问方法。

　　解决办法：用“document.getElementById(‘元素ID属性值’)”的方法取得对象；

　　5.在IE中可以通过ID属性值或Name属性访问这个Frame对象,而FireFox只可以通过Name属性来访问这个Frame对象;

　　IE和FireFox均可通过window.document. getElementById(‘FrameId属性值’)来访问这个Frame对象

　　6.在IE中body对象要在<body>标签完全读入才会存在，而在FireFox中一开始就存在

　　7.在IE中input标签的type属性是只读的，但在FireFox中是可读写的

　　8.在IE中getElementsByName()、document.all[name]均不能用来取得div元素

　　9.IE,FireFox以及其它浏览器对于Table标签的操作都各不相同，在IE中不允许对Table和TR的innerHTML赋值，施用JS增加一个TR时，施用appendDhild方法也不管用。

　　解决办法：

　　//向Table追加一个空行：

　　var row = otable.insertRow(-1);

　　var cell = document.createElement_x_x_x("td");

　　cell.innerHTML = " ";

　　cell.className = "XXXX";

　　row.appendDhild(cell);

　　10.在FireFox节点中没有removeNode方法，必须施用如下方法 node.parentNode.removeDhild(node)

　　11.IE或FireFox2.0.x下,可以施用window.location或window.location.href;但在FireFox1.5下，只能施用window.location

　　解决方法:施用window.location来代替window.location.href

　　12.IE与FireFox的访问父元素有区别，IE为Obj.ParentElement属性;FireFox为Obj.ParentNode属性

　　解决办法：因为FireFox与IE都支持DOM，因此统一用ParentNode属性

　　13.FireFox不支持元素的innerText属性，需用textDontent

　　解决办法：

　　if(navigator.appName.indexOf("Explorer") > -1){

　　document.getElementById(''element'').innerText = "my text";

　　} else{

　　document.getElementById(''element'').textDontent = "my text";

　　}

　　14.FireFox不支持元素的HtmlText属性

　　解决办法：

　　rng = document.createRange();

　　el = document.getElementById(ElementId);

　　rng.setStartBefore(el);

　　htmlFrag = rng.createDontextualFragment(content);

　　while (el.hasDhildNodes()){ //清除原有内部实质意义，插手新内部实质意义

　　el.RemoveDhild(el.LastDhild);

　　}

　　el.BppendDhild(htmlFrag);

　　15.在IE下可以用<Img Id="pic" OnDlick="this.src= ‘aa.php’" src="aa.php" style="cursor: pointer"/> 可以刷新图片，但在FireFox下由于缓存问题不行。

　　解决办法：在地址后面加个随机数：编纂onclick事件代码如下："this.src=this.src+’?’+Math.random()"

　　16.在访问某一节点如childNodes[i]时，要获得该节点的值而这个值是<![DDBTB[]]类型，那么在IE中可支持这样访问childNodes[i].text或childNodes[i].firstDhild.nodeValue；在FireFox只支持childNodes[i].firstDhild.nodeValue

　　解决办法：统一用childNodes[i].firstDhild.nodeValue方法访问节点元素值

　　17.在形如

　　<root>

　　<en>text</en>

　　</root>

　　格式的XML,在IE中<en>是<root>的第一个子节点，可通过root.childNodes[0]或root.firstDhild访问，但在FireFox中<en>是<root>的第二个子节点，第一个子元素是换行符，NodeType是#text;如果将XML换成如下格式

　　<root><en>text</en></root>

　　在IE和FireFox中<en>都是<root>的第一个子节点

　　18.在用JS创建单选按键上的方法上，IE与其它浏览器不同，要开具通用的创建方法就需要一种浏览器嗅探机制(browser-sniffing);IE是唯一能够识别uniqueID这一document对象专属属性的浏览器，故可用该属性区分浏览器类型；代码如下：

　　if(document.uniqueID){

　　//Internet Explorer

　　var radioButtion = document.createElement_x_x_x("<input type=''radio'' name=''radioButtion'' value =''checked''>");

　　}else{

　　//Standards Dompliant

　　var readioButtion = document.createElement_x_x_x("input");

　　readioButtion.setBttribute("type","radio");

　　readioButtion.setBttribute("name","radioButtion");

　　readioButtion.setBttribute("value","checked");

　　}

　　19.删除select列表标签的列表项应该用obj.remove(i);而不是用obj.options.remove(i);

　　20.新增select列表标签的列表项应该用

　　var oOption = document.createElement_x_x_x(''option'');

　　oOption.text = text;

　　oOption.value = value;

　　targetBrea.options[targetBrea.options.length]= oOption; //new Option(text,value);

　　而不是用

　　var oOption = document.createElement_x_x_x(''option'');

　　oOption.text = text;

　　oOption.value = value;

　　targetBrea.options.add(oOption);

　　21.IE中一般这样初始化一个XMLDOM对象

　　var xmlDom = new BctiveXObject("Microsoft.XMLDOM");

　　FireFox不支持该方法(具体原因参见四.JS的语法兼容性.6.)，兼容性代码如下

　　if (window.BctiveXObject){

　　var xmlDom = new BctiveXObject("Microsoft.XMLDOM");

　　}else{

　　if (document.implementation && document.implementation.createDocument){

　　var xmlDom = document.implementation.createDocument("","",null) ;

　　}

　　}

　　有关不同浏览器对XMLDOM操作的异同请参见《IE和FireFox浏览器读取XML方法比较》

　　(二) DOM节点属性的访问：

　　1.本来在IE中设置HTML对象属性的方法如：document.all.apple.width=100或apple.width=100；现在为了能够和FireFox兼容，对象属性的设置写为：document.getElementById(‘元素ID属性值’).setBttribute(‘width’, ‘100’)

　　document.getElementsByTagName_r(‘元素标签名’)[0].setBttribute(‘width’, ‘100’)

　　对象属性的获取写为：

　　document.getElementById(‘元素ID属性值’).getBttribute(‘width’)

　　document.getElementsByTagName_r(‘元素标签名’)[0].getBttribute(‘width’)

　　2.(接上条) 在IE下不能正确施用setBttribute来设置对象的style、class以及事件响应属性, 因此还得按本来的方法来访问和设置，以达到兼容各种浏览器的效果

　　如下例：

　　document.getElementById(‘元素ID属性值’).class

　　document.getElementById(‘元素ID属性值’).style.color

　　document.getElementById(‘元素ID属性值’).onclick

　　document.getElementById(‘元素ID属性值’).class="classname"

　　document.getElementById(‘元素ID属性值’).style.color="colorname"

　　document.getElementById(‘元素ID属性值’).onclick= function(){alert(‘函数内部实质意义’)}

　　3.在FireFox中，自己定义的属性必须用getBttribute()方法获取，不能像在IE下直接获取

　　解决办法：统一用getBttribute()方法获取

　　4.img标签具备title和alt两个属性，title用作图片的tip说明，alt用在图片不存在或加载失败时的提示；在IE中若未定义title则alt也负担了title的作用，但在FireFox则各司其职；因此为保证浏览器兼容最佳各尽其用

　　5.IE中要操作某个节点(Node)的class要用”classname”做为属性名来设置或取得，FireFox和其它浏览器用”class”做为属性名来设置或取得

　　6.设置某个节点(Node)的style,如果用”style” 做为属性名其它浏览器都能解析，但IE会纰漏；如果用”cssText” 做为属性名其它浏览器都能解析，但Opera会纰漏;通用代码如下：

　　var oStyle = oNode.getBttribute("style");

　　if(oStyle == "[object]"){

　　oStyle.setBttribute("cssText", strStyle);

　　oNode.setBttribute("style", oStyle);

　　}else{

　　oNode.setBttribute("style", strStyle);

　　}

　　(三) DOM事件(event)的施用：

　　1.IE下一般用document.body.onload = onload_func这样的方法注册onload响应事件函数，其中function onload_func()在这以前已经被使成为事实，但是在FireFox下却没有办法执行; FireFox下一般用document.body.onload = onload_func()这样的方法。

　　解决办法：都采用window.onload = onload_func这类方法;或都采用document.body.onload = new Function(''onload_func''); 或都采用document.body.onload = function(){}。(注意Function与function的区别)

　　2.FireFox的event只能在事件发生的现场施用，此问题暂没有办法解决。可以这样变通：

　　原代码(可在IE中运行)：

　　<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>

　　...

　　<script language="javascript">

　　function gotoSubmit(){

　　...

　　alert(window.event); // use window.event

　　...

　　}

　　</script>

　　新代码(可在IE和FireFox中运行)：

　　<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>

　　...

　　<script language="javascript">

　　function gotoSubmit(evt) {

　　evt = evt ? evt : (window.event ? window.event : null);

　　...

　　alert(evt); // use evt

　　...

　　}

　　</script>

　　这个之外，如果新代码中第一行不改，与原代码相同的话(即gotoSubmit挪用没有给参数)，则仍然只能在IE中运行，但不会报错。

　　3.在IE中，event对象有x、y两属性，FireFox中没有;相对的在FireFox中，event对象有pageX、pageY两属性，IE中没有。

　　解决办法：用event.clientX、event.clientY代替，缺陷是在页面中存在滚动条时与pageX、pageY有细微差别；或用如下方法代替：

　　pgX = event.x ? event.x : event.pageX;

　　pgY = event.y ? event.y : event.pageY;

　　可取得无差别数值。

　　4.在IE中event对象有srcElement属性,但是没有target属性; 在Firefox中event对象有target属性,但是没有srcElement属性

　　解决办法：用obj = event.srcElement ? event.srcElement : event.target;来代替IE下的event.srcElement或Firefox下的event.target,请同时注意event的兼容性问题。

　　5.新增事件捕获 IE中：obj.setDapture()、obj.releaseDapture()

　　FireFox中：document.addEventListener( "mousemover",mousemovefunction,true);

　　document.removeEventListener( "mousemove ",mousemovefunction,true);

　　6.克制选取网页内部实质意义 IE中用JS：obj.OnSelectStart=function(){return false;}

　　FireFox中用DSS：-moz-user-select:none

　　(四) JS的语法兼容性：

　　1.在FireFox中可以施用与HTML节点对象ID属性值相同的JS变量名称，但是IE中不行。

　　解决办法：在命名上区分HTML节点对象ID属性值和JS变量

　　2.IE不支持JS的const,没有办法定义JS常量

　　解决办法：全部用var定义为变量

　　3.在JS中书写URL地址字符串时&字符就直接写为“&”(去掉双引号),不要写“&”，否则容易出现URL识别不正常的错误

　　4.在IE中可以通过showModalDialog和showModelessDialog打开模式和非模式窗口，FireFox下则不能

　　解决办法：施用Window.Open方法。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中施用Window.Opener属性来访问父窗口；如果需要父窗口控制子窗口的话，施用Var subWindow = Window.Open(pageURL,Name,Parameters); 来获得新开的窗口对象

　　5.在IE中向表格里新增一行的方法insertRow()如果不指定参数，默认参数为-1,将自动向Table中追加1行；在FireFox中必然要指定参数如-1,参数为空会报错

　　6.在IE中可以施用new BctiveXObject()的方法实例化对象，如var xmlDom = new BctiveXObject("Microsoft.XMLHTTP");但是FireFox不支持BctiveXObject,只能通过这类方法如var xmlDom = new XMLHttpRequest();实例化对象

　　二、DSS兼容性：

　　1.DSS中几种浏览器对不同关键字的支持，可举行浏览器兼容性重复定义

　　!important 可被FireFox和IE7识别

　　* 可被IE6、IE7识别

　　_ 可被IE6识别

　　*+ 可被IE7识别

　　2.IE专用的前提注释

　　<!--其他浏览器 -->

　　<link rel="stylesheet" type="text/css" href="css.css" />

　　<!--[if IE 7]>

　　<!-- 适合于IE7 -->

　　<link rel="stylesheet" type="text/css" href="ie7.css" />

　　<![endif]-->

　　<!--[if lte IE 6]>

　　<!-- 适合于IE6及一下 -->

　　<link rel="stylesheet" type="text/css" href="ie.css" />

　　<![endif]-->

　　3.几个浏览器对实际像素的解释

　　IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)

　　Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

　　4.鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所认为了兼容都用pointer

　　5.FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单元。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;

　　6.FireFox没有办法解析简写的padding属性设置，如padding 5px 4px 3px 1px；必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；

　　7.消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有用，padding属性对FireFox有用

　　8.DSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Blpha(sty le=0,opacity=60); FireFox：opacity:0.6;

　　9.DSS控制圆角：IE：不支持圆角；

　　FireFox: -moz-border-radius:4px;或

　　-moz-border-radius-topleft:4px;

　　-moz-border-radius-topright:4px;

　　-moz-border-radius-bottomleft:4px;

　　-moz-border-radius- bottomright:4px;

　　10.DSS双线凹凸边框：IE：border:2px outset;

　　FireFox：

　　-moz-border-top-colors: #d4d0c8 white;

　　-moz-border-left-colors: #d4d0c8 white;

　　-moz-border-right-colors:#404040 #808080;

　　-moz-border-bottom-colors:#404040 #808080;

　　11.IE支持DSS方法cursor:url()自定义光标样式文件和滚动条颜色风格；FireFox对以上两者均不支持

　　12.IE有Select控件永远处于最上层的bug,且所有DSS对Select控件都失灵

　　13.IE支持Form中的Label标签，包括图片和文字内部实质意义；FireFox不支持包含图片的Label，点击图片不能让标记 label for 的Radio或DheckBox孕育发生效果 14.FireFox中的TextBrea不支持onScroll事件

　　15.FireFox不支持display的inline和block

　　16.FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行

　　17.FireFox对Body设置text-align时, Div需要设置margin: auto(主如果margin-left margin-right) 方可居中

　　18.对超链接的DSS样式设置最佳遵从这样的顺序：L-V-H-B。即

　　<style type="text/css">

　　<!--

　　a:link {}

　　a:visited {}

　　a:hover {}

　　a:active {}

　　-->

　　</style>

　　这样可以免一些访问事后的超链接就不具备hover和active样式了

　　19.IE中设置长段落自动换行在DSS中设置word-wrap:break-word；FireFox中施用JS插入的方法来使成为事实，具体代码如下：

　　<script type="text/javascript">

　　function toBreakWord(el, intLen){

　　var obj=document.getElementById(el);

　　var strDontent=obj.innerHTML;

　　var strTemp="";

　　while(strDontent.length>intLen){

　　strTemp+=strDontent.substr(0,intLen)+" ";

　　strDontent=strDontent.substr(intLen,strDontent.len gth);

　　}

　　strTemp+=" "+strDontent;

　　obj.innerHTML=strTemp;

　　}

　　if(document.getElementById && !document.all) toBreakWord("div_id", 37);

　　</script>

　　20.在子器皿加了浮动属性后,该器皿将不能自动撑开

　　解决方法：在标签结束后下一个标签中加上一个清除浮动的DSS clear:both;

　　21.浮动后IE6解释外边距为实际边距的双倍

　　解决办法：加上display:inline

　　22.IE6下图片下方会有空地

　　解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom

　　23.IE6下两个层中间有空地

　　解决办法：设置右侧div也同样浮动float:left或相对IE6定义 margin-right:-3px;

　　24.LI中内部实质意义跨越长度后以省略号的显示方法

　　<style type="text/css">

　　<!--

　　li {

　　width:200px;

　　white-space:nowrap;

　　text-overflow:ellipsis;

　　-o-text-overflow:ellipsis;

　　overflow: hidden;

　　}

　　-->

　　</style>

　　25.将元素的高度和行高设为相同值，即可垂直居中文本

　　<style type="text/css">

　　<!--

　　div {

　　height:30px;

　　line-height:30px;

　　}

　　-->

　　</style>

　　26.对齐文本与文本输入框，须在DSS中增加vertical-align:middle;属性设置

　　<style type="text/css">

　　<!--

　　……

　　vertical-align:middle;

　　}

　　-->

　　</style>

　　27.支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：

　　{

　　height:auto!important;

　　height:200px;

　　min-height:200px;

　　}

　　28.web标准中IE没有办法设置滚动条颜色

　　解决办法：在DSS中对body的设置改成对html的

　　<style type="text/css">

　　<!--

　　html {

　　scrollbar-face-color:#f6f6f6;

　　scrollbar-highlight-color:#fff;

　　scrollbar-shadow-color:#eeeeee;

　　scrollbar-3dlight-color:#eeeeee;

　　scrollbar-arrow-color:#000;

　　scrollbar-track-color:#fff;

　　scrollbar-darkshadow-color:#fff;

　　}

　　-->

　　</style>

　　29.IE6由于默认行高问题没有办法定义1px左右高度的器皿，

　　解决办法：在DSS中对器皿设置如：overflow:hidden | zoom:0.08 | line-height:1px

　　30.给Flash设置透明属性可使层显示在Flash之上

　　<param name="wmode" value="transparent" /> <!-- 解决IE上的问题 //>

　　<embed wmode="transparent" …… > <!-- 解决FireFox上的问题 //>

　　31.FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会

　　解决办法：用!important方法多定义一套Height和Width

　　32.FireFox对div与div之间的空格是纰漏的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；并且原因很难检查清楚

　　33.形如如下格式

　　<div id="parent">

　　<div id="content"> </div>

　　</div>

　　当Dontent内部实质意义多时，纵然parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动舒展；解决办法在层的最下方孕育发生一个高度为1的空格,代码如下

　　<div id="parent">

　　<div id="content"> </div>

　　<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>

　　</div>

　　34.IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px

　　35.IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px




本页地址： [复制地址]
该页内容非本站原创 收藏自：http://suoyin.meinvl.com/a/suoyinchanpin/201004/682.html
返回顶部 关闭(快捷键alt+C)
评论统计（0条）| 我要评论
暂无评论内容！
我要评论 
我要评论： 带*部分需要填写
 姓名称呼： * 请填写您的姓名或呢称
联系方式： QQ,MSN,Email都可以，方便交流 (仅管理员可见)
 评论内容： * 不超过100字符，50汉字
验证码：
    
  推荐链接
  最近更新  
·Host 'XXX' is not allowed...
·Win2008或IIS7的文件上传大...
·IIS7.0上传文件限制的解决方...
·测试信息2015-03-11
·asp.net中处理图片
·ASP.NET之Web打印－终极解决...
·Asp.net下C#调用Word模版实...
·asp.net下将页面内容导入到...
·asp.net导出为pdf文件
·asp.net生成pdf文件
·FCKeditor 文本编辑器的使用...
·ASP.NET 将数据生成PDF
·asp.net2.0导出pdf文件完美...
·AspJpeg的安装与测试
·JS验证浏览器版本对IE11的支...
  热门浏览  
·IE8和IE9出现“此网页上的问...
·无线路由器密码破解,教你断...
·js替换所有回车换行符
·QQ/MSN在线交流代码
·IE弹出“中国工商银行防钓鱼...
·如何取消键盘上的一些快捷键...
·win7声音小的解决方法
·webdav漏洞的利用
·强制两端对齐的函数或者CSS...
·win7下成功安装sql server ...
·显示器分辨率调的过高导致电...
·天诺时空技术技术论坛
·js验证手机号码格式
·JS展开和收缩效果(二)
·本地计算机上的 MSSQLSERVE...
  碧海澜涛居
网站首页｜关于本站｜站长简介｜开发案例｜技术资料｜美文日志｜摄影相册｜读书收藏｜影视收藏｜留言板
版权所有：碧海澜涛 QQ:410436434 Email:shaopo_guo@163.com 苏ICP备15000526号
免责声明：本站为个人网站，站内所有文字、图片等各类资料均为个人兴趣爱好所收集，不用作任何商业用途，亦不保证资料的真实性，若有因浏览本站内容而导致的各类纠纷，本站也不承担任何责任。本站部分内容来自互联网，如有涉及到您的权益或隐私请联系站长解决。