当前位置:文档之家› JavaScript加载XML文件浏览器兼容性问题解决办法

JavaScript加载XML文件浏览器兼容性问题解决办法

JavaScript加载XML文件浏览器兼容性问题解决办法
JavaScript加载XML文件浏览器兼容性问题解决办法

在自动化测试平台开发过程中,需要将测试用例文件夹目录的树状结构生成xml文件,并将用例路径保存的xml属性中,便于选中用例后寻找执行路径。

因此需要在html中解析xml文件。解析的方法使用的是js来解析XML文件,并将解析后的XML Dom对象返回。由于各种浏览器支持Dom对象的方法不同,导致加载xml文件时不同浏览器会弹出各种错误提示。

例如:

1.ie的方法错误可能会报:对象不支持此属性或方法

2.firefox的方法错误可能会报:ActiveXObject is not defined

3.chrome的方法错误可能会报:object # has no method 'load'

本文主要解决在解析XML文件前个各浏览器对XML文件的装载兼容性问题。

在平台中,开始由于少写了Chrome部分的try catch代码,导致在chrome下报错,无法显示配置测试任务页的用例列表,问题在于chrome浏览器不支持load方法(xmlDoc.load(xmlUrl)处抛出异常),需要添加如下代码:

var chromeXml = new XMLHttpRequest();

chromeXml.open("GET", xmlUrl, false);

chromeXml.send(null);

xmlDoc = chromeXml.responseXML.documentElement;

下面为修改好后的完整js代码,仅供参考

function loadXMLDoc(xmlUrl)

{

try //Internet Explorer

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

catch(e)

{

try //Firefox, Mozilla, Opera, etc.

{

xmlDoc=document.implementation.createDocument("","",null);

}

catch(e) {alert(e.message)}

}

try

{

xmlDoc.async=false;

xmlDoc.load(xmlUrl);

}

catch(e) {

try //Google Chrome

{

var chromeXml = new XMLHttpRequest();

chromeXml.open("GET", xmlUrl, false);

chromeXml.send(null);

xmlDoc = chromeXml.responseXML.documentElement;

//alert(xmlDoc.childNodes[0].nodeName);

//return xmlDoc;

}

catch(e)

{

alert(e.message)

}

}

return xmlDoc;

}

修改后列表显示正常:

欢迎大家登录http://10.22.198.107 (用户名密码:test/test)查看“配置测试任务”页解析xml生成的表格

浏览器兼容性案例分析

浏览器兼容性案例分析: 1.不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。 2.IE6下不支持png图片 问题症状:IE6下不显示png图片。 碰到频率:100% 解决方案: 3.IE6下不支持:hover 问题症状:IE6下不支持:hover。 碰到频率:100% 解决方案:改成js方法 4.相同名称的样式被定义了多次,但不知道在定义在哪里 问题症状:相同名称的样式被定义了多次,但不知道定义在哪里,导致样式冲突。 碰到频率:100% 解决方案:最简单的办法是在样式后面添加!important,这样可以保持这个样式一直被调用。 .bHidden { display:none !important; }

5.单行双列自适应宽度,IE6中出现错行现象解决办法 问题症状: 调整单行双列自适应宽度布局,随着浏览器窗口大小自动改变left和right层的宽度。代码如下:

运行以上代码,在IE6中偶尔会出现错行现象: 主要原因:在IE6中采用四舍五入的方法计算宽度,那么随着浏览器窗口的大小调整,left和right 按25%、75%计算,四舍五入,(left+right)总宽度会大于浏览器窗口宽度即(main)宽度,right层就会自动跳行至左侧浮动。 碰到频率:100% 解决方案: 在#right样式中添加:clear:right;代码。如 #right{width:75%; clear:right;background:#939393;} 6.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性 7. 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度 解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

JavaScript常用知识点

1、GET和POST的区别,何时使用POST? GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符 POST:一般用于修改服务器上的资源,对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值, 也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。 然而,在以下情况中,请使用POST 请求: 无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制) 发送包含未知字符的用户输入时,POST 比GET 更稳定也更可靠JavaScript是客户端和服务器端脚本语言,可以插入到HTML页面中,并且是目前较热门的Web开发语言。同时,JavaScript也是面向对象编程语言。 类似的基本题目还包括:JavaScript都有哪些类型?JavaScript是谁发明的?……2、列举Java和JavaScript之间的区别? Java是一门十分完整、成熟的编程语言。相比之下,JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖,而是针对不同的意图而设计的。Java是一种面向对象编程(OOPS)或结构化编程语言,类似的如C ++或C,而JavaScript是客户端脚本语言,它被称为非结构化编程。

3. JavaScript和ASP脚本相比,哪个更快? JavaScript更快。JavaScript是一种客户端语言,因此它不需要Web服务器的协助来执行。另一方面,ASP是服务器端语言,因此总是比JavaScript慢。值得注意的是,Javascript现在也可用于服务器端语言(nodejs)。 4、什么是负无穷大? 负无穷大是JavaScript中的一个数字,可以通过将负数除以零来得到。 5、如何将JavaScript代码分解成几行吗? 在字符串语句中可以通过在第一行末尾使用反斜杠“\”来完成 例:document.write(“This is \a program”); 如果不是在字符串语句中更改为新行,那么javaScript会忽略行中的断点。

浏览器兼容性问题及解决方案

浏览器兼容新问题 W3C对标准的推进,Firefox,Chrome,Safari,Opera的出现,结束了IE雄霸天下的日子。 然而,这对开发者来说,是好事,也是坏事。 说它是好事,是因为浏览器厂商为了取得更多的市场份额,会促使各浏览器更符合W3C标准,而得到更好的兼容性,并且,不同浏览器的扩展功能(例如-moz,-webkit开头的样式),对W3C标准也是个推进;说它是坏事,因为,多个浏览器同时存在,这些浏览器在处理一个相同的页面时,表现有时会有差异。这种差异可能很小,甚至不会被注意到;也可能很大,甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”,无形中给我们的开发增加了不少难度。 从浏览器内核的角度来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题。 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性,也属于这一类。 3. 其他类别:除以上两类问题外的功能性问题,一般是浏览器自身提供的功能,在内核层之上的。 例如下面的页面,是一个渲染相关的问题: 在各个浏览器中都表现的不同,这就属于兼容性问题。 造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核,并且它们处理同一件事情的时候思路不同。 现今常见的浏览器及其排版引擎(又称渲染引擎)及脚本引擎,如下:

而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码,不规范的代码会使不兼容现象更加突出。 例如: 不规则的嵌套: DIV 中直接嵌套LI 元素是不合标准的,LI 应该处于UL 内。此类问题常见的还有P 中嵌套DIV,TABLE等元素。 不规范的DOM接口和属性设置: 总之,人为的原因也占很大一部分。而人为造成兼容性问题的原因,除了粗心之外,大都源于浏览器bug 的存在,和开发者对标准的不了解。 比如,如果要做一个功能,功能是想让鼠标悬停在IMG 元素上方时,可以出现提示信息,经常针对IE 做开发的人,可能会使用IMG 元素的“alt” 属性,但其他浏览器中就是不给…alt? 属性面子。因为W3C 标准中规定要去做这件事的属性是”title“,大多浏览器符合标准,IE 不符合,这是IE 浏览器内核的问题;开发者不知道”title“ 才是正解,不遵循标准去写代码,是开发者的问题。所以,一个问题分两半,浏览器和开发者都有责任。 既然都有责任,就都有义务去解决兼容性问题。那么,从浏览器的角度来讲,它的厂商应该修复浏览器的bug和不合标准的地方,当某一天IE 的”alt“ 不能用于提示了,还有人用这个错误的属性去显示提示么?从开发者角度来讲,多了解标准,了解浏览器兼容性问题,就可以在开发的过程中,有效的避开兼容性问题,让你的页面在所有浏览器中畅通无阻。 废话少说,下面就讲讲如何有效的避免一些兼容性问题。 J AVA S CRIPT (4)

浏览器间不兼容的原因及解决办法

网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是CSS Hack,即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS,最大化兼容浏览器。 一般情况下,我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器,下面是用的较频繁的CSS Hack技巧: 用的最广莫过于!important了,它可以针对IE(IE 7.0能正确理 解!important)和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important,就可以针对其优先了。所以为了兼顾IE 6.0与火狐之间的差异,我都会使用!important。 1、仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 2、仅IE7可以识别 *+html s elect {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 3、IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 4、html/**/ >body select {…}

这句与上一句的作用相同。 5、仅IE6不识别,屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值,注释在冒号前。 6、仅IE6与IE5不识别,屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 7、仅IE5不识别,屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。 8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :”/”}/”"; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 9、只有Opera识别 @media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。 以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有

Javascript笔试题及答案

J a v a s c r i p t笔试题及 答案 Company Document number:WTUT-WT88Y-W8BBGB-BWYTT-19998

Javascript面试笔试题 考试时间90分钟 一、不定项选择题(每题3分,共30分) 1.声明一个对象,给它加上name属性和show方法显示其name值,以下 代码中正确的是( D ) A.var obj = [name:"zhangsan",show:function(){alert(name);}]; B.var obj = {name:"zhangsan",show:”alert”}; C.var obj = {name:"zhangsan",show:function(){alert(name);}}; D.v ar obj = {name:"zhangsan",show:function(){alert;}}; 2.以下关于Array数组对象的说法不正确的是( CD) A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给 sort函数加一个排序函数的参数 B.reverse用于对数组数据的倒序排列 C.向数组的最后位置加一个新元素,可以用pop方法 D.unshift方法用于向数组删除第一个元素 3.要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的 是( A ) A.="已经选中该文本框" B.="已经选中该文本框" C.="已经选中该文本框" D.="已经选中该文本框" 4.点击页面的按钮,使之打开一个新窗口,加载一个网页,以下JavaScript 代码中可行的是( AD)

浏览器兼容性常见问题

1.注释标签常用语法 1.1注释的注意事项

1.2出错条件 1.3注释中多个地方出错时

1.4两个出错的注释标签,其间的内容被视为注释的一部分 1.5解决方案 2.浏览器的字符编码 2.1问题描述 各浏览器对于字符编码别名支持的宽泛程度有差异,当指定了浏览器无法识别的字 符编码别名时,浏览器会以确定编码的优先级顺序采用设置的更低优先级的字符编码, 以此类推。而 Chrome Safari Opera 中对字符编码别名有着比其他浏览器更宽泛的支持。

2.2文档的字符编码顺序 针对如何确定一个文档的字符编码,用户代码必须遵守下面的优先级顺序(优先级由高至低): (1)HTTP "Content-Type" 字段中的 "charset" 参数。 (2)META 声明中 "http-equiv" 为 "Content-Type" 对应的值中的 "charset" 的值。(3)元素的 charset 属性。 2.3实例1 上面是一段 PHP 代码,HTTP "Content-Type" 头字段设置了字符编码为 BIG5,页面中的 META 元素设置了字符编码为 UTF-8,页面本身的编码类型为 GB2312。页面执行时,通过脚本输出了当前浏览器所采用的字符编码类型。 这个动态页面在各浏览器中运行时均显示出了 BIG5,可见此时所有浏览器均遵照HTML4.01 规范所述,以更高优先级的 HTTP "Content-Type" 头字段的 "charset" 参数的值作为字符编码类型。

2.4各浏览器默认编码格式 上面页面中没有设定任何的字符编码信息,则各浏览器对于这个页面将使用各自的默认编码。页面自身的编码为 GB2312。 各浏览器中运行效果如下: 2.5实例2 上面的动态页面自身的编码为 BIG5,HTTP "Content-Type" 头字段设置了字符编码为 maccyrillic,页面中的 META 元素设置了字符编码为 b.i.g+5。 各浏览器中运行效果如下:

Windows系统下各浏览器兼容性

Windows系统下各浏览器常用CSS HACK汇总表 1. 此汇总表中测试浏览器的版本为: 微软系统自带:IE6、 IE7、IE8 火狐:Firefox 3.6.6 Safari:Safari 5.0 谷歌浏览器:Chrome 6.0.458.1 dev Opera浏览器:Opera 10.60 2. 其中,多数CSS hack是在selector{property:value;}基础上更改的。 selector代表CSS选择器,property代表CSS特性,value代表特性的值。 3. FF代表Firefox,Ch代表Chorme,Sa代表Safari,Op代表Opera 4. Q代表Quirks Mode,S代表Standards Mode。 5. Hack Type列的数字,指的是上面CSS hack的实现方式中的列表号。 1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”,2是指以Firefox或Webkit特有的扩展样式实现的hack。

一定遵守CSS hack的三条原则。CSS hack是没有办法的时候才使用的解决兼容性问题的招术,是用兼容性问题去解决兼容性问题,无异于饮鸩止渴。切莫一有兼容性问题就使用,时刻记得改掉用CSS hack修补的问题。 IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】:「\9」、「*」、「_」 【示例】: #divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。 3.区别IE6、IE7、Firefox (EXP 1) 【区别符号】:「*」、「_」 【示例】: #divcss5{ background:blue; /*Firefox背景变蓝色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读

四种XML解析器比较

1.详解 1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准。DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何工作。由于它是基于信息层次的,因而DOM被认为是基于树或基于对象的。DOM以及广义的基于树的处理具有几个优点。首先,由于树在内存中是持久的,因此可以修改它以便应用程序能对数据和结构作出更改。它还可以在任何时候在树中上下导航,而不是像SAX那样是一次性的处理。DOM使用起来也要简单得多。 2)SAX SAX处理的优点非常类似于流媒体的优点。分析能够立即开始,而不是等待所有的数据被处理。 而且,由于应用程序只是在读取数据时检查数据,因此不需要将数据存储在内存中。这对于大型文档来说是个巨大的优点。事实上,应用程序甚至不必解析整个文档;它可以在某个条件得到满足时停止解析。一般来说,SAX还比它的替代者DOM快许多。 选择DOM还是选择SAX?对于需要自己编写代码来处理XML文档的开发人员来说,选择DOM 还是SAX解析模型是一个非常重要的设计决策。 DOM采用建立树形结构的方式访问XML文档,而SAX采用的事件模型。 DOM解析器把XML文档转化为一个包含其内容的树,并可以对树进行遍历。用DOM解析模型的优点是编程容易,开发人员只需要调用建树的指令,然后利用navigation APIs访问所需的树节点来完成任务。可以很容易的添加和修改树中的元素。然而由于使用DOM解析器的时候需要处理整个XML文档,所以对性能和内存的要求比较高,尤其是遇到很大的XML文件的时候。由于它的遍历能力,DOM解析器常用于XML文档需要频繁的改变的服务中。 SAX解析器采用了基于事件的模型,它在解析XML文档的时候可以触发一系列的事件,当发现给定的tag的时候,它可以激活一个回调方法,告诉该方法制定的标签已经找到。SAX对内存的要求通常会比较低,因为它让开发人员自己来决定所要处理的tag.特别是当开发人员只需要处理文档中所包含的部分数据时,SAX这种扩展能力得到了更好的体现。但用SAX解析器的时候编码工作会比较困难,而且很难同时访问同一个文档中的多处不同数据。 3)JDOM https://www.doczj.com/doc/e43404645.html, JDOM的目的是成为Java特定文档模型,它简化与XML的交互并且比使用DOM实现更快。由于是第一个Java特定模型,JDOM一直得到大力推广和促进。正在考虑通过“Java规范请求JSR-102” 将它最终用作“Java标准扩展”。从2000年初就已经开始了JDOM开发。 JDOM与DOM主要有两方面不同。首先,JDOM仅使用具体类而不使用接口。这在某些方面简化了API,但是也限制了灵活性。第二,API大量使用了Collections类,简化了那些已经熟悉这些类的Java开发者的使用。 JDOM文档声明其目的是“使用20%(或更少)的精力解决80%(或更多)Java/XML问题”(根据学习曲线假定为20%)。JDOM对于大多数Java/XML应用程序来说当然是有用的,并且大多数开

关于浏览器兼容性问题

关于浏览器兼容性问题 制作网页时总会遇到各种浏览器的兼容性问题,工作也有一段时间了,做了一点小总结希望分享给大家,共同进步。 1、float定位。 Float定位是css排版中的非常重要的手段,属性float值:left、right、none(默认值),当设定了元素向左或者向右浮动时,元素会向其父元素的左侧或右侧靠紧。 在用float的同时我们要注意到 (1)float元素的父元素不能指定clear属性。 这是因为MaeIE下如果对float的元素父元素使用clear属性,周围的float元素布局就会混乱。 (2)float元素无比知道那个width属性 很多浏览器在显示未指定width的float元素时会有bug,所以不管float元素的内容如何,一定要为其制定width属性。(注意:制定元素时尽量使用em而不是px)(3)float元素不能指定margin和padding的属性 ie在显示指定了margin和padding的float元素时有bug。你可以再float元素内部嵌套一个div来势之margin和padding,也可以使用hack方法为ie指定特定的值。 (4)float元素之核的宽度要小于100% 如果float元素的宽度和正好等于100%,为保证大多浏览器显示正常,要是宽度之和小于100 2、margin加倍的问题。 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ 3、ie6中莫名出现多余的字符 我遇到的现象是:ie6下有些问题,重复出现在第二行,就是某些段落或某些文字的末尾N个字符,他另起一行重复出现,在选选着重复出现的文字时,原有的文字也被选中 解决方法:很简单,在重复出现文字的末尾补N个 ;就可以。 4、ie7中正常,但ie8中不正常,div的位置position:absolute在ie8中不起作用 解决方法:设置html兼容ie7,在head下加 5、针对ie 6、ie 7、火狐浏览器 (1)Ie6 、FF对!important;测试正常 Ie7对!important;可以正确解释。 为了使他们都正常: #style1{color:#333;} FF正常显示#333; *html #style1{color:#666;} ie6显示#666 *+html #style1{color:#999;} ie7显示#999 *+html与*html是ie特有的标签,firefox暂不支持,而*+html又为ie7特有的标签。 注意:顺序不能错了。 (2)FF: 链接加边框和背景色,需设置display: block, 同时设置float: left 保证不换行。 参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height,

Javascript笔试题及答案

Javascript面试笔试题 考试时间90分钟 一、不定项选择题(每题3分,共30分) 1.声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确 的是( D ) A.var obj = [name:"zhangsan",show:function(){alert(name);}]; B.var obj = {name:"zhangsan",show:”alert(https://www.doczj.com/doc/e43404645.html,)”}; C.var obj = {name:"zhangsan",show:function(){alert(name);}}; D.var obj = {name:"zhangsan",show:function(){alert(https://www.doczj.com/doc/e43404645.html,);}}; 2.以下关于Array数组对象的说法不正确的是(CD) A.对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加 一个排序函数的参数 B.reverse用于对数组数据的倒序排列 C.向数组的最后位置加一个新元素,可以用pop方法 D.unshift方法用于向数组删除第一个元素 3.要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是( A ) A.window.status="已经选中该文本框" B.document.status="已经选中该文本框" C.window.screen="已经选中该文本框" D.document.screen="已经选中该文本框" 4.点击页面的按钮,使之打开一个新窗口,加载一个网页,以下JavaScript代码中可行 的是(AD) A. B. C. D.

5.使用JavaScript向网页中输出

hello

,以下代码中可行的是(BD) A. B. C. D.

浏览器兼容性bug

常见浏览器兼容性问题与解决方案 标签:前端开发浏览器兼容问题 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。 第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。 文章主要针对的是第一类,严谨型的开发人员,因此这里主要从浏览器解析差异的角度来分析兼容性问题。(相关文章推荐:主流浏览器CSS 3和HTML 5兼容清单) 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

各种浏览器兼容问题列表

各种浏览器兼容问题列表 1、仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 2、仅IE7可以识别 *+html select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 3、IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 4、html/**/ >bod y select {…} 这句与上一句的作用相同。 5、仅IE6不识别,屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值,注释在冒号前。 6、仅IE6与IE5不识别,屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 7、仅IE5不识别,屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。 8、盒模型解决方法 selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 9、只有Opera识别 @media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。 以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样

div+css中常见的浏览器兼容性处理

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important; 一、CSS 兼容 以下两种方法几乎能解决现今所有兼容. 1, !important (不是很推荐,用下面的一种感觉最安全) 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.) 代码: 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. 代码: 注意: *+html 对IE7的兼容必须保证HTML顶部有如下声明: 代码: 二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对, 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽. 代码: ********************************************************************* ************************************************** 三、其他兼容技巧(相当有用) 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不 会.(可用!important解决)

XML的四种解析器(dom,sax,jdom,dom4j)原理及性能比较[收藏]

1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准。DOM 是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何工作。由于它是基于信息层次的,因而DOM被认为是基于树或基于对象的。DOM以及广义的基于树的处理具有几个优点。首先,由于树在内存中是持久的,因此可以修改它以便应用程序能对数据和结构作出更改。它还可以在任何时候在树中上下导航,而不是像SAX那样是一次性的处理。DOM使用起来也要简单得多。 2)SAX SAX处理的优点非常类似于流媒体的优点。分析能够立即开始,而不是等待所有的数据被处理。而且,由于应用程序只是在读取数据时检查数据,因此不需要将数据存储在内存中。这对于大型文档来说是个巨大的优点。事实上,应用程序甚至不必解析整个文档;它可以在某个条件得到满足时停止解析。一般来说,SAX还比它的替代者DOM快许多。 选择DOM还是选择SAX?对于需要自己编写代码来处理XML文档的开发人员来说,选择DOM还是SAX解析模型是一个非常重要的设计决策。DOM 采用建立树形结构的方式访问XML文档,而SAX采用的事件模型。 DOM解析器把XML文档转化为一个包含其内容的树,并可以对树进行遍历。用DOM解析模型的优点是编程容易,开发人员只需要调用建树的指令,然

后利用navigation APIs访问所需的树节点来完成任务。可以很容易的添加和修改树中的元素。然而由于使用DOM解析器的时候需要处理整个XML文档,所以对性能和内存的要求比较高,尤其是遇到很大的XML文件的时候。由于它的遍历能力,DOM解析器常用于XML文档需要频繁的改变的服务中。 SAX解析器采用了基于事件的模型,它在解析XML文档的时候可以触发一系列的事件,当发现给定的tag的时候,它可以激活一个回调方法,告诉该方法制定的标签已经找到。SAX对内存的要求通常会比较低,因为它让开发人员自己来决定所要处理的tag。特别是当开发人员只需要处理文档中所包含的部分数据时,SAX这种扩展能力得到了更好的体现。但用SAX解析器的时候编码工作会比较困难,而且很难同时访问同一个文档中的多处不同数据。 3)JDOM https://www.doczj.com/doc/e43404645.html,/ JDOM的目的是成为Java特定文档模型,它简化与XML的交互并且比使用DOM实现更快。由于是第一个Java特定模型,JDOM一直得到大力推广和促进。正在考虑通过“Java规范请求JSR-102”将它最终用作“Java标准扩展”。从2000年初就已经开始了JDOM开发。 JDOM与DOM主要有两方面不同。首先,JDOM仅使用具体类而不使用接口。这在某些方面简化了API,但是也限制了灵活性。第二,API大量使用了Collections类,简化了那些已经熟悉这些类的Java开发者的使用。

浏览器不兼容处理方法

CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点。 1、DOCTYPE 影响CSS 处理 2、FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行 3、FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中 4、FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设一个height 和width 5、FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上 6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 7、cursor: pointer 可以同时在IE FF 中显示游标手指状,hand 仅IE 可以 8、FF: 链接加边框和背景色,需设置display: block, 同时设置float: left 保证不换行。参照menubar, 给a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格。 9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important; 10、IE5 和IE6的BOX解释不一致 IE5下div{width:300px;margin:0 10px 0 10px;} div 的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px! important;width /**/:340px;margin:0 10px 0 10px} 关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:) 11、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;} 就能解决大部分问题 注意事项: 1、float的div一定要闭合。 例如:(其中floatA、floatB的属性已经设置为float:left;)<#div id=\”floatA\”> <#div id=\”floatB\”> <#div id=\”NOTfloatC\”> 这里的NOTfloatC并不希望继续平移,而是希望往下排。 这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。

javascript读取服务器端XML文件

javascript读取服务器端XML文件 最近需要用javascript解析一个XML文件,为了前期本地测试,在读取的时候用的是绝对地址,可后来发现不能读取服务器上的文件,不能用相对路径,一堆问题,无从解决.。找了相关资料,最后用XMLHTTP 来处理,注意这里可能会出现中文乱码问题...... 先说下大体思路: 写文件的代码: FileOutputStream writerStream = new java.io.FileOutputStream(fileName2); BufferedWriter writer = new java.io.BufferedWriter(new java.io.OutputStreamWriter(writerStream, "UTF-8"));//设置文件编码方//式 writer.write(strbuf.toString());//strbuf为文件内容 writer.close(); 读文件的代码: var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); var url = "xxxxxxxxxx";//根据需要,这里以XX代替 xmlHttp.open("GET", url, false); xmlHttp.setRequestHeader("Content-Type","utf-8"); //设置读取文件的编码方式 xmlHttp.send();

var content = ""; if(xmlHttp.status==200){ content = xmlHttp.responseText; //content就是读取到到的文本内容,当然,根绝不同需要,调用不同方法.... }

相关主题
文本预览
相关文档 最新文档