2022年多浏览器兼容分析 .pdf

1 累积：技海拾贝|Cumulation 多浏览器兼容分析文：国际合作事业部苗志远程序员对于javascript都是有些瞧不上的心思，程序员只管实现功能，只要功能能用就行。然而随着WEB2.0的日益风行，网络用户越来越多，用户对于WEB 系统的评价标准已经不再简单停留于 “能用 ”的地步，而是要“好用 ”，这就对WEB 设计者提出了更高的要求：响应速度、兼容性、美观程度、交互性等等。1 概述W3C 对标准的推进，Firefox，Chrome，Safari ，Opera 的出现，结束了IE 雄霸天下的日子。然而，这对开发者来说，是好事，也是坏事。说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准， 而得到更好的兼容性，并且，不同浏览器的扩展功能( 例如-moz，-webkit开头的样式 ) ，对 W3C标准也是个推进；说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题 ”。而正是这些 “浏览器兼容性问题” ，无形中给我们的开发增加了不少难度。从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：1. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。2. 脚本相关：和脚本相关的问题，包括JavaScript和 DOM 、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。3. 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的，这里暂不讨论。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 21 页 - - - - - - - - - 2 2 浏览器内核要搞清楚浏览器内核是什么，首先应该先搞清楚浏览器的构成。简单来说浏览器可以分为 两部分， shell+ 内核。其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设臵等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。从 Mozilla将 Gecko 独立出来后，才有了外壳和内核的明确划分。目前主流的浏览器有IE6/7/8、Mozilla、FireFox 、Opera、Safari、Chrome、Netscape 等。2.1什么是浏览器内核浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS 引擎。它负责取得网页的内容（HTML 、XML 、图像等等）、整理讯息（例如加入CSS等） ，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。JS 引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、 Presto、Webkit 。2.2 渲染引擎Trident又称 MSHTML，是微软开发的渲染引擎（包含了Javascript引擎 JScript） ，目前很多浏览器都使用这个引擎，例如IE,MaxThon,TT,The World,360,搜狗浏览器， Maxthon( 最新版已经不使用) 等。Gecko 是 C+ 开发的， Open Source 的渲染引擎，包括了SpiderMonkey(Rhino)。主要的使用者有 Firefox,Netscape6及以上版本， MozillaSuite/SeaMonkey等 。Webkit是 苹 果 公 司 基 于KHTML 开 发 的 。 他 包 括Webcore 和JavaScriptCore名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 21 页 - - - - - - - - - 3 （SquirrelFish,V8）两个引擎。主要的使用者有Safari ，Chrome。Presto 由 Opera Software公司开始的， 用于 Opera 的渲染引擎。 Macromedia Dreamweaver （MX版本及以上） 和 Adobe Creative Suite 2 也使用了 Presto 的内核。主要的使用者为Opera7及以上。2.3 JS引擎JavaScript最初由网景公司的Brendan Eich 设计，是一种动态、弱类型、基于原型的语言，内臵支持类。以它为基础，制定了ECMAScript 标准。他的起源并不是如Javascript高级程序设计 书中所述，是 Brendan Eich 自主发明的。 （参考 aimingoo 的考证文章）JavaScript在浏览器的实现中还必须含有DOM 和 BOM 。Web浏览器一般使用公共API 来创建主机对象来负责将 DOM 对象反射进JavaScript。2.4 文档类型声明源码的顶部都会有DocType声明， 在遵循标准的任何Web文档中， DOCTYPE 都是一项必需的元素。它会影响代码验证，并决定了浏览器最终如何显示你的web文档。在默认情况下，FF 和 IE 的解释标准是不一样的，也就是说，假如一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE 解释下面的HTML 。在同一种标准下，不同浏览器的解释模型都有所差异，假如声明标准不同，差异更大。一、什么是DOCTYPE DOCTYPE 是 Document Type（文档类型） 的简写， 在页面中， 用来指定页面所使用的XHTML（或者 HTML ）的版本。 要想制作符合标准的页面，一个必不可少的要害组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML 里的标识和CSS才能正常生效。二、 DOCTYPE 的规则DOCTYPE 声明的写法遵循一定的规则，它指出阅读程序应该用什么规则集来解释文档中的标记。在Web 文档的情况下，“阅读程序 ”通常是浏览器或者校验器这样的一个程序，“规则”则是 w3c 所发布的一个文档类型定义（dtd ）中包含的规则。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 21 页 - - - - - - - - - 4 每个 dtd 都包括标记、 attributes、properties等内容，它们用于标记web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个 web建议标准 （比如 html 4 frameset和 xhtml 1.0 transitional）都有自己的dtd 。 声明位于文档中的最前面的位臵，处于 标签之前。此标签可告知浏览器文档使用哪种HTML 或 XHTML 规范。该标签可声明三种DTD 类型，分别表示严格版本、过渡版本以及基于框架的HTML 文档。以下面这个 标签为例： 在 上 面 的 声 明 中 ， 声 明 了 文 档 的 根 元 素 是html， 它 在 公 共 标 识 符 被 定 义 为-/W3C/DTD XHTML 1.0 Strict/EN 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的DTD 。如果找不到，浏览器将使用公共标识符后面的URL 作为寻找DTD 的位臵。提示和注释：注释： 标签没有结束标签！2.4.1 HTML HTML 4.01 规定了三种文档类型：Strict 、Transitional 以及 Frameset。HTML Strict DTD 如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS ）配合使用：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 21 页 - - - - - - - - - 5 HTML Transitional DTD Transitional DTD 可包含W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS ）的浏览器以至于您不得不使用HTML 的呈现特性时，请使用此类型： Frameset DTD Frameset DTD 应当被用于带有框架的文档。除frameset 元素取代了body 元素之外， Frameset DTD 等同于Transitional DTD： 2.4.2 XHTML XHTML 1.0 规定了三种XML 文档类型： Strict 、Transitional 以及 Frameset。XHTML Strict DTD 如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS ）配合使用： XHTML Transitional DTD Transitional DTD 可包含W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS ）的浏览器以至于您不得不使用XHTML 的呈现特性时，请使用此类型： XHTML Frameset DTD 当您希望使用框架时，请使用此DTD ！ 如需检查你是否编写了带有正确DTD 的合法XHTML 文档，您可以把您的XHTML 页面链接到一个XHTML 验证器。CSS Validation Service(W3C CSS验证服务是由W3C 制作的一个免费软件，用于帮助Web设计者检查层叠样式表(CSS) 远程地址： http:/jigsaw.w3.org/css-validator/本地安装教程详见：http:/jigsaw.w3.org/css-validator/DOWNLOAD.html 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 21 页 - - - - - - - - - 7 3 渲染兼容3.1 网页排版经年以来，许多优秀的文章都在赞美着基于CSS 设计的优越，哀叹着基于表格设计的没落。表格出现以前， Web 本是个相当乏味的地方，正是使用表格排版，才打开了可视化的页面设计的新局面。表格对于Web 和 Web 设计领域普及的贡献到底有多大或许有争议，但一旦离开表格，我们这些网页设计师们必会失去工作，却是毋庸臵疑的。近年来基于表格的设计确实被妖魔化了，Web 纯化论者会告诉你，表格对排版毫无意义，因而你绝不能用到它。然而历史证明，许多技术一开始是为了实现某个目标设计的，却在别的领域发现了更大的用场而大展身手。就像Web 本身，一开始不也只是为了共享研究数据的，现在在娱乐和商业方面的应用却与信息与教育方面的并驾齐驱了。Web 设计师们多年以来都在使用表格排版页面，这是绝大部分设计师都已掌握的能力。如此地使用表格能保证你获得预想的效果，通过一些简单的hack ，比如间隔gif ， 我们几乎 一 定 能保 证 我们 的 站点 在 最 广泛 的Web 浏览 器 上 看起 来 都一 样 ，从 最 低 版本的Netscape 4到 Safari 这样的现代浏览器。尽管先驱者们早已宣传了好久Web 标准， 大部分的网站还是使用表格和不兼容标准的代码开发的，因此用户代理就不得不在很长一段时间内支持基于表格的排版方式。这对于Web 标准的卖点来说，是个致命的打击：标准没有标准应有的地位。不大可能会出现下面这种情况， 某个主要的浏览器厂商( 唔，还是说Microsoft) 突然发布了一个大部分网站都显示不了的浏览器。所以网页设计者们总感觉不到开始使用基于CSS 排版和支持标准的代码的那种危机感和必要性。严格意义来说， table和 div 都是可用合理的布局方法，你不能否认table的价值，或者div 只有优点没有缺点。可以说web架构即可以使用table也可以 div 。那么关键就是你对你的 web 需求的定位。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 21 页 - - - - - - - - - 8 我们需要考虑到web页面给我们的site会带来多大的影响。如我们的site针对的海量的访问，海量的数据， （当然 cache问题这里不讨论）那么在构架上通常会减少table使用量，尤其是大量的循环的时候，当然table也是有用的。对于复杂的site 来说， div+css有时候很难准确定义出我们所表达的内容这时候table就是很好的选择。这也是开发前要考虑的问题，在要达到开发目的的同时保证所需要的成本。同样用div+css来实现一个结构复杂的 page 时往往不如用一个table就能简单得搞定。table和 div 有其各自得特征。这也意味着他们价值取向有不同，对于开发设计的人员来说很重要的。table可以很容易建立起结构化的界面，通过table自身的参数定义，我们能把页面布局很快定义成我们所需要的效果。当然css 的配合就可以相对减少。缺点就是扩展性和可读性相对较差，扩展性差表现在维护和修正上面，一个复杂的table布局的site ，她的海量页面在随着需求变化下，开发人员将一筹莫展， 大量的修改需求会把web 的界面开发工作彻底粉碎。可读性差，这个也是相对来说。table 在表现上更加“ 严谨 ” ，有局限性。在表现复杂的结构时会非常难懂。往往我们的website 的程序内容又十分庞大，对开发人员来说要把代码马上从头脑中有清晰的轮廓十分不易。div 呢，在 html 语法中我们知道div 的含有和作用，如果用它来实现布局页面的话，几乎完全要靠 css来支撑，可以说div 不能单独使用，尤其是针对性强的 web，给用户视觉上的效果要求十分严格，div 的使用要配合专业的css 参数来实现。从前面的例子可以看出div 布局更加灵活， 能简单也能够复杂。相同的显示效果在css和 div 的配合上可以产生不同的搭配方式。扩展性强是她的优点，开发设计人员只要对相应的css 做调整就能让布局焕然一新，这 点是 table 远远不及的。但在对结构相对复杂的局部，往往div+css 开发难度高，一个简单效果div 和 css要写半天，这点table 就好很多了，用 dw 之类的所见即所得的软件下我们可以轻易做出用 div+css 写半天才能做出的东西。而且， table和 div 在兼容问题中，table更具有优势。我们常用的ie ，ff 浏览器对div css设臵上非常挑剔，往往同一个css 在 2 种浏览器上会有不同的结果，对开发人员来说是个可怕的问题。我们不可能对用户的浏览器进行排斥，因此只有通过在开发的时候调整我们的语法和布局方法。div 要求我们严格css 支持，而 table名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 21 页 - - - - - - - - - 9 可以不用考虑这么多。 table的严谨在不同浏览器中得到了很好的表现。在考虑我们的定位，特征，兼容问题后， 如何布局， 采用何种构架方案我想大家心里应该都很清楚了，我想说对于真正的开发者来说善用其利是最重要的理念。而不是一味偏好，或者体现自己技术能力来做开发设计工作。对于 div 我们可以充分发挥其灵活清晰的架构特性，配合 table的严谨来实现各种web page的需求3.2 CSS兼容为控件指定样式时，最好采用形式与页面分离的方法，即引用css 文件的方法。1. 若子元素的高度高于父控件，最好不要指定父元素的高度2.IE6下默认的字体尺寸大致在12 - 14px 之间，当你试图定义一个高度小于这个默认值的div 的时候，IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用height: 6px; 来定义了一个div 的高度，实际在IE 下显示的仍然是一个12 px 左右高度的层。要解决这个问题，可以强制定义该div 的字体尺寸，或者定义overflow 属性来限制div 高度的自动调整。比如 或者 都可以阻止IE 的自作聪明。3. 利用 style=”为控件直接设臵样式时不要重复，例如个别浏览器会只解析一个4.标签的 alt 属性，在 IE 中，alt 属性相当于title属性，鼠标悬浮于上时才会显示的提示信息。在firefox中 alt 则是图片不存在时显示的替代文字，其它chrome、opera 、safari则不支持 alt 属性，所以尽量用title来表现提示信息5.FF 下给 div 设臵 padding 后会导致 width 和 height增加, 但 IE 不会 .( 可用 CSSHacker解决 ) 6. 居中问题 : 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 21 页 - - - - - - - - - 10 1).垂 直 居 中 . 将line-height 设 臵 为当 前div 相 同 的 高 度 , 再 通 过vertical-align: middle.( 注意内容不要换行.) 2). 水平居中 . 主要的样式定义如下：body TEXT-ALIGN: center; #center MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于 IE 这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上 “ MARGIN-RIGHT: auto;MARGIN- LEFT: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV 里，你可以依次拆出多个div ，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。7. 若需给 a 标签内内容加上样式 , 需要设臵 display: block;(常见于导航标签) 8.FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的 div 在 ie 下 margin加倍等问题 . 9.ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦 . (常见于导航标签和内容列表) 10. 作为外部 wrapper 的 div 不要定死高度 , 最好还加上 overflow: hidden.以达到高度自适应 . 11. 关于手形光标 . 应当使用 cursor: pointer. cursor: hand 只适用于 IE. 12. 浮动 ie 产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; / 这种情况之下IE 会产生 200px的距离 display:inline; /使浮动忽略 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 21 页 - - - - - - - - - 11 这里细说一下block,inline两个元素 ,Block元素的特点是 : 总是在新行上开始, 高度 , 宽度, 行高 , 边距都可以控制( 块元素 );Inline元素的特点是: 和其他元素在同一行上,不可控制( 内嵌元素 ); #box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效果 diplay:table; 13.IE 与宽度和高度的问题IE 不认得 min- 这个定义，但实际上它把正常的width 和 height当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width和 min-height的话，IE 下面根本等于没有设臵宽度和高度。比如要设臵背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px; 14. 页面的最小宽度min-width是个非常方便的CSS命令， 它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE 不认得这个，而它实际上把width 当做最小宽度来使。为了让这一命令在 IE 上也能用，可以把一个 放到 标签下，然后为div 指定一个类：然后 CSS这样设计：#container min-width: 600px; width:expression(document.body.clientWidth 600? “600px”: “auto” );第一个 min-width是正常的；但第2 行的 width 使用了 Javascript，这只有 IE 才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。15. 清除浮动名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 21 页 - - - - - - - - - 12 .hackbox display:table; /将 对 象 作 为 块元 素 级 的 表 格 显 示 或者.hackbox clear:both; 或者加入 :after（伪对象） , 设臵在对象后发生的内容，通常和content配合使用， IE 不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的,#box:after content: “ . ” ; display: block; height: 0; clear: both; visibility: hidden; 16.DIV 浮动 IE 文本产生 3 象素的 bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px 的间距 . #box float:left; width:800px; #left float:left; width:50%; #right width:50%; *html #left margin-right:-3px; /这句是关键 HTML代码 17. 属性选择器 ( 这个不能算是兼容, 是隐藏 css 的一个 bug) piddivid 这个对于 IE6.0 和 IE6.0 以下的版本都隐藏,FF 和 OPera 作用属性选择器和子选择器还是有区别的, 子选择器的范围从形式来说缩小了, 属性选择器的范围比较大 , 如 pid中 , 所有 p 标签中有 id 的都是同样式的. 18.IE 捉迷藏的问题当 div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 21 页 - - - - - - - - - 13 解决办法：对 #layout使用 line-height属性或者给 #layout使用固定高和宽。页面结构尽量简单。3.3 CSS Hacker 由于不同的浏览器对CSS 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS ，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。CSS Hack大致有 3 种表现形式， CSS 类内部 Hack 、选择器 Hack 以及 HTML 头部引用(if IE)Hack，CSS Hack主要针对 IE 浏览器 。类内部 Hack ：比如IE6 能识别下划线 _ 和星号 * ，IE7 能识别星号 * ，但不能识别下划线 _ ，而 firefox两个都不能认识。等等选择器Hack ：比如IE6能识别 *html .class，IE7能识别 *+html .class或者*:first-child+html .class。等等HTML头 部 引 用 (if IE)Hack： 针 对 所 有IE ： ， 针对 IE6 及以下版本： ，这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。IE、Firefox、 Opera 和 Safari对 CSS样式 important和*的支持1、IE6、IE7 都支持 * ，但 IE8 终于回归正统，放弃了对* 的支持2、IE7、IE8、 Firefox、Opera、Safari都支持 important 顾名， important的优先级要高 . 举例说明：body background-color:#FF0000 !important; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 21 页 - - - - - - - - - 14 *background-color:#00FF00 !important; *background-color:#0000FF; background-color:#000000; IE6 选择最后一个，即：background-color:#000000; （因为 IE6 对 important不感冒）IE7 选择第二个，即：background-color:#000000;（因为 IE7 开始对 important感冒了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用）IE8 和 Firefox、 Opera、 Safari选择第一个， 即：background-color:#FF0000 !important;（IE8 完全感冒于important，同时丢弃了对* 的感情）另外再补充一个，下划线” _“,IE6 支持下划线， IE7、IE8 和 Firefox、Opera、Safari均不支持下划线。浏览器优先级别:FFIE7IE6,CSS hack书写顺序一般为FF IE7 IE6 4 JS 兼容1. Firefox中不支持 document.all,尽量使用 document.getElementById(idName)获取控件对象在 IE6 IE7 IE8(Q) 中，支持以document.getElementById(elementName) 的方式获取name 属性值为elementName 的 A APPLET BUTTON FORM IFRAME IMG INPUT MAP META OBJECT EMBED SELECT TEXTAREA 元素，而其他浏览器的任何元素均不支持该方式。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 21 页 - - - - - - - - - 15 在使用 document.getElementById 方法获取页面元素时，应传入元素的 id 属性值，而不能使用元素的 name 属性值。同时需注意页面中的元素的 id 属性值不能与其他元素的name 属性值有重复。在 IE6 IE7 IE8(Q) 中，使用 document.getElementById 获取页面元素时，不区分参数的大小写。另外，对于 IE 支持的以 documnt.all(id) 形式获取元素的方式，在 IE6 IE7 IE8(Q) 中也不区分参数的大小写。在使用 document.getElementById 获取页面元素时，应保证作为参数的 id 与目标元素的实际 id 值完全一致。2.Firefox的 JS引擎无法识别innerText，只支持 innerHTML 3. 获取窗口高度宽度：首先需要确认网页的文档声明，即patMode ，可以用来判断当前页面采用的渲染方式。下面官方文档的说明：BackCompat：标准兼容模式关闭。CSS1Compat ：标准兼容模式开启。当patMode等 于BackCompat时 ， 浏 览 器 客户 区 宽 度 是document.body.clientWidth；当patMode等 于CSS1Compat 时 ， 浏 览 器 客户 区 宽 度 是document.documentElement.clientWidth。浏览器客户区高度、滚动条高度、滚动条的Left 、滚动条的Top 等等都是上面的情况。兼容代码如下：if (patMode = BackCompat) cWidth = document.body.clientWidth; cHeight = document.body.clientHeight; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 21 页 - - - - - - - - - 16 sWidth = document.body.scrollWidth; sHeight = document.body.scrollHeight; sLeft = document.body.scrollLeft; sTop = document.body.scrollTop; else /patMode = CSS1Compat cWidth = document.documentElement.clientWidth; cHeight = document.documentElement.clientHeight; sWidth = document.documentElement.scrollWidth; sHeight = document.documentElement.scrollHeight; sLeft = document.documentElement.scrollLeft = 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; sTop = document.documentElement.scrollTop = 0 ? document.body.scrollTop : document.documentElement.scrollTop; 4.js设 臵 对 象 高 度 时 采 用document.getElementById(idName).style.height = 100+px; 获取对象高度时使用var height=document.getElementById(idName).offsetheight; 5.firefox中无insertAdjacentElement(sWhere , oElement) 方法，对应的解决方法beforeBegin: this.parentNode.insertBefore(parsedNode,this); afterBegin: this.insertBefore(parsedNode,this.firstChild); beforeEnd: this.appendChild(parsedNode); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 21 页 - - - - - - - - - 17 afterEnd: if(this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling); else this.parentNode.appendChild(parsedNode);6.js获取年份应该用newDate().getFullYear(),IE用 getYear()可以获取但是ff 中getYear()获取的是自1900年起第几年7.event IE 下可直接利用window.event 获取 event对象，ff中 有 两 种 方 法 ， 第 一 种 通 过 给 函 数 传 递 的event对 象 ， 如onclick=dosomething(event) 第二种 var ev=arguments.callee.caller.arguments0 IE 、ff 通用的方法即为var event = window.event | arguments.callee.caller.arguments0; 8. 获取事件源对象，如获取用户点击的控件对象：var inputObj = event.srcElement | event.target; alert(inputObj .tagName); 其中 srcElement为 IE 方法、 target为 ff 方法。不 过 最 好 在 调 用 函 数 的 时 候 就 把 控 件 对 象 作 为 参 数 传 递 过 去 , 如onclick=dosomething(this) function dosomething(inputObj) alert(inputObj.tagName); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 21 页 - - - - - - - - - 18 9. 读取 xml 文件IE 中可使用如下代码：var xmlDoc; if (window.ActiveXObject) xmlDoc = new ActiveXObject(Microsoft.XMLDOM); xmlDoc.async = false; xmlDoc.load(xmlFile); ff 下最好采用ajax方式获取 if (document.implementation & document.implementation.createDocument) var xmlhttp=new window.XMLHttpRequest(); xmlhttp.open(GET,xmlF