浏览器中JS的兼容问题

合集下载

浏览器常用12种兼容问题（JS）

浏览器常⽤12种兼容问题（JS）//1.滚动条到顶端的距离（滚动⾼度）var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//2.滚动条到左端的距离var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;/3. IE9以下byClassNamefunction byClassName(obj,className){//判断是否⽀持byClassNameif(obj.getElementsByClassName){//⽀持return obj.getElementsByClassName(className);}else{//不⽀持var eles = obj.getElementsByTagName('*'); //获取所有的标签var arr = []; //空数组，准备放置找到的对象//遍历所有的标签for(var i = 0,len = eles.length;i < len;i ++){//找出与我指定class名相同的对象if(eles[i].className === className){arr.push(eles[i]); //存⼊数组}}return arr; //返回}}//4. 获取⾮⾏内样式兼容 IE:currentStyle 标准：getComputedStylefunction getStyle(obj,attr){return window.getComputedStyle ? getComputedStyle(obj,true)[attr] : obj.currentStyle[attr];}//div.style.width = '';设置样式//obj['属性']：对象是变量时，必须⽤对象['属性']获取。

JavaScript中的浏览器兼容性问题与解决方案

JavaScript中的浏览器兼容性问题与解决方案在开发网页时，经常会遇到JavaScript的浏览器兼容性问题。

由于不同的浏览器对JavaScript的解释和支持程度不同，开发者需要注意这些差异，以确保网页在不同浏览器上正常运行。

本文将介绍一些常见的浏览器兼容性问题，并提供相应的解决方案。

一、DOM操作差异DOM（Document Object Model）是JavaScript操作网页内容的重要接口。

然而，不同浏览器对DOM的实现方式会存在差异，导致相同的DOM操作在不同浏览器上产生不同的效果或错误。

解决方案：1. 使用适配器模式：使用工具函数或库来封装DOM操作，例如jQuery等。

这些封装库会处理浏览器兼容性问题，使得开发者无需关心具体的差异。

2. 检测浏览器特性：通过判断浏览器特性的支持情况，选择合适的方式进行DOM操作。

可以使用Modernizr等工具来进行特性检测。

二、事件处理差异不同浏览器对事件的处理方式也存在差异。

例如，事件对象的属性、方法以及事件触发顺序等方面都可能有所不同。

解决方案：1. 使用事件库：类似于适配器模式，可以使用事件库来处理不同浏览器之间的差异。

例如，使用jQuery的事件处理方法可以保证跨浏览器的一致性。

2. 绑定事件时添加前缀：在绑定事件时，可以先针对具体的浏览器添加前缀，以修复特定浏览器的兼容性问题。

例如，`attachEvent`和`addEventListener`可以同时使用来绑定事件。

三、CSS样式差异JavaScript常用于修改网页的样式，但不同浏览器对CSS属性的解释也会有所不同，导致样式显示不一致。

解决方案：1. 使用样式库：像Bootstrap、Normalize.css等库提供了跨浏览器的CSS样式订正，可以减少不同浏览器之间的样式差异。

2. 检测浏览器前缀：对于支持特定前缀的属性，可以通过检测浏览器类型来动态添加相应的前缀。

例如，使用类似`-webkit-`和`-moz-`的前缀。

Javascript不同浏览器差异和兼容方法

Javascript不同浏览器差异和兼容⽅法浏览器兼容性是由多个不同浏览器同时存在导致的（浏览器内核、版本不同），这些浏览器在处理⼀个相同的页⾯时，表现有时会有差异，作为⼀个前端开发，处理兼容问题就成了我们必不可少的任务之⼀，下⾯将介绍⼀些处理JavaScript兼容性的⽅法。

1. 找⼦标签的问题问题描述:1). childNodes, firstChild, lastChild会将两个标签之间的换⾏也当作⽂本节点2). firstElementChild/lastElementChild在IE中只⽀持IE9及以上3). children只包含所有的标签⼦节点, 在规范中没有, 但所有的浏览器都⽀持解决办法:1). 如果找⼦标签, 使⽤children2). 如果找标签体⽂本, 使⽤innerHTML2. 获取兄弟标签的问题问题描述1.nextElementSibling/previousElementSibling, 对IE只⽀持IE9及以上2. nextSibling/previousSibling : 返回是标签之间的换⾏⽂本节点解决:var preEle = ele.previousSibling;if(preEle.nodeType === 3) {//如果是⽂本节点类型, 再找上⼀个兄弟preEle = preEle.previousSibling;}3. event问题描述:event对象创建好后, 浏览器处理的⽅式不相同1). ⾮标准IE只是将event对象保存为window的属性2). chrome除了保存, 还将event作⽤函数传给回调⽅法了3). firfox只是将event作⽤函数传给回调⽅法了解决：event = event || window.event;// 或者简写如下ev = ev || event;4. 滚动条坐标问题描述:在获取当前的滚动坐标时, 不同的浏览器不⼀样1). chrome: document.body.scrollTop2). 其它: document.documentElement.scrollTop3). ⼀种浏览器只⽀持⼀种写法, 另⼀种写法返回0解决:var sTop =document.body.scrollTop + document.documentElement.scrollTop//PS: scrollLeft值同理5. 添加事件监听器的函数问题描述:标准：obj.addEventListener(事件名称，事件函数，是否捕获);1.有捕获2.事件名称没有on3.this触发该事件的对象IE：obj.attachEvent(事件名称，事件函数);1.没有捕获2.事件名称有on3.this指向window解决:/** 需求: 编写⼀个通⽤函数给指定UI对象设置指定的监听*/function bind (obj, eventName, fun) {if(document.addEventListener) {obj.addEventListener(eventName, fun, false);} else {obj.attachEvent("on"+eventName, function() {fun.call(obj);});}}6. 取消事件的默认⾏为问题描述:在操作⼀些页⾯元素时会导致⼀些默认⾏为⽐如: 点击<a>转向链接, 滑动滚轮页⾯滚动解决:function stopDefault(e) {// 阻⽌默认浏览器动作(W3C)if ( e && e.preventDefault ) {e.preventDefault();} else {// IE中阻⽌函数器默认动作的⽅式window.event.returnValue = false;}return false;}7. 给元素添加滚轮滚动监听问题描述: 不同的浏览添加滚动监听的⽅式不⼀样ie/chrome : onmousewheel⽤event.wheelDelta获取上：120下：-120firefox :DOMMouseScroll 必须⽤addEventListenerevent.detail上：-3下：3解决如下:if(document.body.onmousewheel == undefined) {//firefoxdocument.body.addEventListener("DOMMouseScroll", fun, false); } else { //IE和chromedocument.body.onmousewheel = fun;}8. typeof 函数问题: ⾮标准IE中返回object解决: 函数 instanceof Function 看是否返回true。

前端开发常见的跨浏览器兼容性问题

前端开发常见的跨浏览器兼容性问题在前端开发中，跨浏览器兼容性问题是一项常见而又具有挑战性的任务。

由于不同浏览器的设计理念、实现机制和对Web标准的支持程度都不尽相同，导致同一份代码在不同浏览器上的表现可能会有所差异甚至出现错误。

有效地解决跨浏览器兼容性问题，不仅可以提升用户体验，还能保证网站在各个浏览器上都能正常运行。

本文将介绍前端开发常见的跨浏览器兼容性问题，并给出相应的解决方案。

1. CSS兼容性问题CSS兼容性问题是前端开发中最常见的问题之一。

不同浏览器对CSS标准的支持程度各不相同，常见的兼容性问题包括盒模型的解析差异、浮动元素引起的布局问题、定位属性（如position和z-index）的兼容性差异等。

解决这些问题的方法包括使用CSS Reset来统一不同浏览器的默认样式、选择合适的CSS选择器以确保样式的正确应用、使用浏览器前缀（-webkit-、-moz-、-o-等）来适配不同浏览器，以及使用CSS Hack和Polyfills来处理特定浏览器的兼容性问题。

2. JavaScript兼容性问题JavaScript兼容性问题主要集中在浏览器对JavaScript标准（如ECMAScript规范）的支持程度和对各种JavaScript API（如DOM操作、AJAX、Canvas等）的实现方式上。

解决这些问题的方法包括使用特性检测（feature detection）而非浏览器检测（browser detection）来判断浏览器支持的功能，使用标准的JavaScript语法和API来编写代码以确保在不同浏览器上的正常执行，同时使用浏览器兼容性库（如Modernizr、Polyfills等）来填补浏览器的功能差异。

3. HTML语义化和结构兼容性问题HTML语义化是指使用正确的HTML标记和结构来表达文档的含义和信息，而兼容性问题则主要集中在不同浏览器对HTML标签和结构的解析差异上。

前端开发中的常见问题和解决方案

前端开发中的常见问题和解决方案前端开发是一个不断发展的领域，开发者们经常会遇到各种问题，需要不断寻找解决方案。

本文将介绍前端开发中常见的问题，并提供相应的解决方案。

一、浏览器兼容性问题1.1 CSS样式在不同浏览器中的显示差异解决方案：使用浏览器前缀（-webkit、-moz、-o、-ms）以及各种兼容性工具（如autoprefixer）来解决不同浏览器的兼容性问题。

1.2 JavaScript在不同浏览器中的兼容性问题解决方案：使用polyfill来填补浏览器对新特性的不支持，或者使用库或框架来处理兼容性问题。

例如，使用jQuery库来处理跨浏览器的事件处理。

1.3 HTML5新特性在旧浏览器中的支持问题解决方案：使用HTML5 Shiv来解决旧浏览器不支持HTML5标签的问题，使用Modernizr来检测浏览器是否支持特定的HTML5特性。

二、性能优化问题2.1 页面加载速度慢解决方案：减少HTTP请求数量，合并和压缩CSS和JavaScript文件，使用CDN加速，优化图片大小和格式，使用浏览器缓存等方法来提高页面加载速度。

2.2 页面渲染速度慢解决方案：减少DOM操作次数，使用事件委托来减少事件绑定，使用CSS3动画代替JavaScript动画，使用懒加载和无限滚动等技术来延迟加载和渲染内容。

2.3 内存泄漏问题解决方案：避免循环引用，及时释放不再使用的资源，优化内存占用等方法来避免内存泄漏问题。

三、响应式设计问题3.1 页面在不同设备上显示错乱解决方案：使用响应式布局来适应不同设备的屏幕尺寸，使用媒体查询来设置不同的样式和布局。

3.2 图片在不同设备上显示不清晰解决方案：使用响应式图片技术（如srcset和picture元素）来根据设备的像素密度来加载适应的图片。

3.3 表单在小屏幕设备上难以操作解决方案：使用适当的输入控件，如使用日期选择器代替手动输入日期，使用滑动选择器代替下拉框等来提高在小屏幕设备上的表单操作性。

前端开发中常见的兼容性问题与解决方法

前端开发中常见的兼容性问题与解决方法在前端开发中，无论是网站还是移动应用，都会遇到兼容性问题。

由于不同浏览器的内核和标准解读存在差异，导致同一个网页或应用在不同浏览器中的呈现效果会有所不同。

本文将介绍一些常见的兼容性问题，并提供相应的解决方法。

1. CSS样式兼容性问题CSS样式是页面布局和视觉呈现的关键部分，但在不同浏览器中，对CSS属性的支持程度可能会有差异。

一个常见的问题是浏览器前缀，比如-webkit-或-moz-。

解决该问题的方法是使用 CSS3 前缀自动生成器，例如 Autoprefixer，它可以自动根据浏览器最新统计数据和规则，为 CSS 添加所需的前缀。

另外，还有一些 CSS 属性在不同浏览器中的取值和解读方式也存在差异。

在设置样式时，可以使用浏览器的特定前缀属性、hack 或工具库来解决问题。

同时，建议在开发过程中尽量使用通用属性和值，避免使用仅特定浏览器支持的属性。

2. JavaScript兼容性问题JavaScript 是实现网页动态效果和交互功能的重要技术之一。

但由于不同浏览器对 JavaScript 标准的实现程度不同，可能导致网页在不同浏览器中的运行效果不一致。

以下是一些常见的 JavaScript 兼容性问题及解决方法。

一是不同浏览器对 JavaScript DOM API 的解析和操作可能会有所差异。

解决这一问题的方法是使用工具库，如 jQuery、React 等，它们提供了跨浏览器兼容的API 封装。

二是不同浏览器对 JavaScript ECMA 标准的支持程度存在差异。

解决方法之一是使用 Polyfill，即为旧版浏览器提供缺失的 ES6 或 ES7 特性支持。

可以使用工具库如 Babel 或 core-js 来自动引入所需的 Polyfill。

三是一些浏览器对 JavaScript 中的特定方法或属性可能存在兼容性问题，比如IE 对 XMLHttpRequest 的实现与标准不一致。

浏览器中JS的兼容问题

JS在IE和FF中的兼容性问题1. 对象问题1.1 Form对象现有问题：现有代码这获得form对象通过document.forms("formName")，这样使用在IE 能接受，MF 不能。

解决方法：改用作为下标运算。

改为document.forms["formName"]备注上述的改用作为下标运算中的formName是id而name1.2 HTML对象现有问题：在IE 中，HTML 对象的ID 能够作为document 的下属对象变量名直接使用。

在MF 中不能。

document.all("itemName")或document.all("itemId")解决方法：使用对象ID作为对象变量名document.getElementById("itemId")备注document.all是IE自定义的方法，所以请大家尽量不使用。

更有一种方式，在IE和MF都能够使用var f = document.forms["formName "];var o = f. itemId;1.3 DIV对象现有问题：在IE 中，DIV对象能够使用ID作为对象变量名直接使用。

在MF 中不能。

DivId.style.display = "none"解决方法：document.getElementById("DivId").style.display = "none"备注获得对象的方法不管是不是DIV对象，都使用getElementById方法。

参见1.21.4 关于frame现有问题在IE中能够用window.testFrame取得该frame，mf中不行解决方法在frame的使用方面MF和IE的最主要的区别是：假如在frame标签中书写了以下属性：那么IE能够通过id或name访问这个frame对应的window对象而mf只能够通过name来访问这个frame对应的window对象例如假如上述frame标签写在最上层的window里面的htm里面，那么能够这样访问IE：window.top.frameId或window.top.frameName来访问这个window对象MF：只能这样window.top.frameName来访问这个window对象另外，在mf和ie中都能够使用window.top.document.getElementById("frameId")来访问frame标签并且能够通过window.top.document.getElementById("testFrame").src = 'xx.htm'来转换frame的内容也都能够通过window.top.frameName.location = 'xx.htm'来转换frame的内容1.5 窗口现有问题IE中能够通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是MF不支持。

js使用时遇到的一些问题的解决方法

js使用时遇到的一些问题的解决方法
一、客户端脚本引擎的问题
1. 无法识别 JavaScript 语法
解决办法：检查 JavaScript 语法是否正确，以及其它相关配置，如 HTML 代码中的 <script> 标记、文件编码等。

2. 无法解析 JavaScript 语句
解决办法：检查 JavaScript 语法是否正确，如缺少分号或不正确的结构等。

3. 当前客户端脚本引擎可能会有所不同
解决办法：检查当前客户端脚本版本是否有所更新，根据客户端的版本来决定是否需要更改 JavaScript 语法，以便在客户端的脚本引擎中执行。

二、内存管理的问题
1. JavaScript 中的引用计数内存泄漏
解决办法：检查 JavaScript 中的引用计数，使用合理的内存管理手段，如缓存器，来避免内存泄漏。

2. 内存溢出问题
解决办法：使用良好的程序设计，避免内存溢出，尽量使用内存缓存来减少重复分配内存的情况，以及释放不再使用的内存，从而最大限度地节省内存。

三、浏览器兼容性问题
1. CSS 兼容的问题
解决办法：使用浏览器的开发者工具来查看不同浏览器的 CSS 支持情况，并根据不同浏览器的具体情况来使用兼容的 CSS 语法。

2. JavaScript 兼容的问题
解决办法：检查 JavaScript 代码中的兼容性问题，使用相应的兼容性库或框架来解决浏览器兼容性问题。

四、网络连接问题
1. 超时问题
解决办法：检查服务器端网络连接是否正常，可以使用 Ajax 重试技术来处理超时问题。

2. 请求头丢失
解决办法：检查服务器端网络连接是否正常，并重新发送请求头。

JavaScript的浏览器兼容性

JavaScript的浏览器兼容性JavaScript是一种广泛使用的编程语言，通常用于为网页添加交互性和动态功能。

然而，由于不同浏览器的存在，JavaScript的兼容性问题可能会给开发者带来很大的挑战。

本文将讨论JavaScript的浏览器兼容性问题，并提供一些解决方案。

一、浏览器差异不同浏览器对JavaScript的解释和执行方式存在差异，这是导致浏览器兼容性问题的主要原因。

各个浏览器厂商根据自己的实现标准来解释JavaScript代码，这就导致了不同浏览器之间行为的不一致性。

二、版本差异除了不同浏览器之间的差异外，不同版本的同一浏览器也可能存在兼容性问题。

随着JavaScript的发展，新的API和功能被引入，旧版浏览器可能无法正确解释和支持这些新特性。

因此，开发者需要考虑到不同浏览器及其不同版本之间的兼容性问题。

三、解决方案1. 特性检测特性检测是JavaScript中一种常用的浏览器兼容性解决方案。

通过检测特定API或对象是否存在，开发者可以根据不同浏览器的实现来选择不同的代码分支执行，从而保证在不同浏览器中的兼容性。

示例：if (typeof document.addEventListener === 'function') {// 使用addEventListener方式绑定事件} else if (typeof document.attachEvent === 'function') {// 使用attachEvent方式绑定事件（针对旧版IE）} else {// 其他处理方式}```2. 浏览器前缀某些CSS属性和API在不同浏览器中需要加上厂商前缀才能正常工作。

在使用这些属性和API时，开发者需要根据不同浏览器的要求添加对应的前缀，以确保在各个浏览器中的兼容性。

示例：```.btn {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;```3. Polyfill和ShimPolyfill和Shim是用于填充缺失功能或修复浏览器行为的JS代码库。

JavaScrit中的浏览器兼容性问题

JavaScrit中的浏览器兼容性问题JavaScript中的浏览器兼容性问题JavaScript是一种常用的脚本语言，被广泛应用于网页开发和移动应用开发等领域。

然而，由于不同浏览器厂商实现JavaScript的方式存在差异，导致在不同浏览器上可能出现兼容性问题。

本文将讨论JavaScript中的浏览器兼容性问题，并提供解决方案。

一、浏览器兼容性问题的原因1. 不同浏览器之间对JavaScript标准的解释存在差异，导致同一段代码在不同浏览器上的执行结果不一致。

2. 不同浏览器对JavaScript的新特性的支持有所延迟，新特性在某些浏览器上可能无法使用。

3. JavaScript在不同浏览器上的性能表现可能存在差异，导致同一段代码在不同浏览器上的执行速度有所差异。

二、常见的浏览器兼容性问题1. DOM操作兼容性问题：不同浏览器对于DOM对象的操作方式存在差异，例如获取元素、修改元素属性等。

2. 事件处理兼容性问题：不同浏览器对于事件的支持和处理方式有所差异，例如事件的绑定和触发机制等。

3. CSS兼容性问题：JavaScript常用于动态修改网页样式，不同浏览器对于部分CSS属性的支持有所差异，导致样式在不同浏览器上显示不一致。

4. AJAX兼容性问题：AJAX是一种通过JavaScript与服务器进行异步通信的技术，不同浏览器对于AJAX的实现方式有所差异，可能导致代码在某些浏览器上无法正常工作。

5. 原生API兼容性问题：JavaScript提供了一些原生API，如日期处理、正则表达式等，不同浏览器对于这些API的实现方式可能存在差异，导致代码在不同浏览器上的执行结果不一致。

三、解决浏览器兼容性问题的方法1. 使用现代的JavaScript库或框架：如jQuery、React等，这些库或框架封装了底层的兼容性问题，简化了开发过程。

2. 使用条件注释：利用条件注释判断浏览器类型和版本，在不同浏览器上提供不同的代码实现，从而解决兼容性问题。

不同浏览器中JS兼容

9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
IE&Firefox：
<body>
</body>
<script. type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
13.frame问题
以下面的frame为例：
<frame. src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.

JavaScript跨浏览器兼容性解决方案

JavaScript跨浏览器兼容性解决方案JavaScript是一种广泛应用于网页开发的脚本语言，但是由于各个浏览器的差异，不同浏览器对JavaScript的解释和支持程度不尽相同，这给开发者带来了跨浏览器兼容性的挑战。

本文将介绍一些常见的JavaScript跨浏览器兼容性解决方案，帮助开发者解决这一问题。

1. 特性检测特性检测是一种判断浏览器是否支持某个特定功能或属性的方法。

通过检测特定的特性是否存在，开发者可以根据不同浏览器的支持情况来执行相应的代码。

例如，可以使用以下代码来检测浏览器是否支持localStorage：```javascriptif (typeof localStorage !== 'undefined') {// 执行支持localStorage的代码} else {// 执行不支持localStorage的代码}```通过特性检测，开发者可以针对不同浏览器环境编写不同的代码逻辑，从而实现跨浏览器兼容性。

2. 浏览器嗅探浏览器嗅探是一种判断用户所使用的浏览器及版本的技术。

通过读取浏览器的User-Agent信息，开发者可以获得浏览器的相关信息，并根据这些信息来执行相应的代码。

然而，浏览器嗅探并不是一种推荐的解决方案，因为User-Agent信息可以被用户自行更改，也存在一定的安全风险。

3. 使用第三方库为了解决跨浏览器兼容性问题，许多开发者选择使用第三方JavaScript库，例如jQuery、React等。

这些库为开发者提供了一致的API和功能，使得开发者不需要关心底层的浏览器兼容性细节。

通过使用这些库，开发者可以大大减少兼容性问题带来的开发难度。

4. 标准化Web标准是一种推动浏览器兼容性的重要手段，通过遵循Web标准，开发者可以减少兼容性问题的出现。

在编写JavaScript代码时，开发者可以参考相关的标准和规范，尽量避免使用不被广泛支持的特性或行为。

JS中常遇到的浏览器兼容问题和解决方法

JS中常遇到的浏览器兼容问题和解决⽅法JS中常遇到的浏览器兼容问题和解决⽅法今天整理了⼀下浏览器对JS的兼容问题，希望能给你们带来帮助，我没想到的地⽅请留⾔给我，我再加上常遇到的关于浏览器的宽⾼问题//以下均可console.log()实验var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//⽹页可见区域宽var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//⽹页可见区域宽//以上为不包括边框的宽⾼，如果是offsetWidth或者offsetHeight的话包括边框var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个⽹页的宽var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个⽹页的⾼var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//⽹页被卷去的⾼var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//⽹页左卷的距离var screenH=window.screen.height;//屏幕分辨率的⾼var screenW=window.screen.width;//屏幕分辨率的宽var screenX=window.screenLeft;//浏览器窗⼝相对于屏幕的x坐标（除了FireFox）var screenXX=window.screenX;//FireFox相对于屏幕的X坐标var screenY=window.screenTop;//浏览器窗⼝相对于屏幕的y坐标（除了FireFox）var screenYY=window.screenY;//FireFox相对于屏幕的y坐标event事件问题：//event事件问题document.onclick=function(ev){//⾕歌⽕狐的写法，IE9以上⽀持，往下不⽀持；var e=ev;console.log(e);}document.onclick=function(){//⾕歌和IE⽀持，⽕狐不⽀持；var e=event;console.log(e);}document.onclick=function(ev){//兼容写法；var e=ev||window.event;var mouseX=e.clientX;//⿏标X轴的坐标var mouseY=e.clientY;//⿏标Y轴的坐标}DOM节点相关的问题，我直接封装了函数，以便随时可以拿来使⽤：//DOM节点相关，主要兼容IE 6 7 8function nextnode(obj){//获取下⼀个兄弟节点if (obj.nextElementSibling) {return obj.nextElementSibling;} else{return obj.nextSibling;};}function prenode(obj){//获取上⼀个兄弟节点if (obj.previousElementSibling) {return obj.previousElementSibling;} else{return obj.previousSibling;};}function firstnode(obj){//获取第⼀个⼦节点if (obj.firstElementChild) {return obj.firstElementChild;//⾮IE678⽀持} else{return obj.firstChild;//IE678⽀持};}function lastnode(obj){//获取最后⼀个⼦节点if (stElementChild) {return stElementChild;//⾮IE678⽀持} else{return stChild;//IE678⽀持};}document.getElementsByClassName问题：//通过类名获取元素document.getElementsByClassName('');//IE 6 7 8不⽀持；//这⾥可以定义⼀个函数来解决兼容问题，当然别在这给我提jQuery...//第⼀个为全局获取类名，第⼆个为局部获取类名function byClass1(oClass){//全局获取，oClass为你想要查找的类名，没有“.”var tags=document.all?document.all:document.getElementsByTagName('*');var arr=[];for (var i = 0; i < tags.length; i++) {var reg=new RegExp('\\b'+oClass+'\\b','g');if (reg.test(tags[i].className)) {arr.push(tags[i]);};};return arr;//注意返回的也是数组，包含你传⼊的class所有元素；}function byClass2(parentID,oClass){//局部获取类名，parentID为你传⼊的⽗级IDvar parent=document.getElementById(parentID);var tags=parent.all?parent.all:parent.getElementsByTagName('*');var arr=[];for (var i = 0; i < tags.length; i++) {var reg=new RegExp('\\b'+oClass+'\\b','g');if (reg.test(tags[i].className)) {arr.push(tags[i]);};};return arr;//注意返回的也是数组，包含你传⼊的class所有元素；}获取元素的⾮⾏间样式值：//获取元素的⾮⾏间样式值function getStyle(object,oCss) {if (object.currentStyle) {return object.currentStyle[oCss];//IE}else{return getComputedStyle(object,null)[oCss];//除了IE}}设置监听事件：//设置监听事件function addEvent(obj,type,fn){//添加事件监听，三个参数分别为对象、事件类型、事件处理函数，默认为false if (obj.addEventListener) {obj.addEventListener(type,fn,false);//⾮IE} else{obj.attachEvent('on'+type,fn);//ie,这⾥已经加上on，传参的时候注意不要重复加了};}function removeEvent(obj,type,fn){//删除事件监听if (obj.removeEventListener) {obj.removeEventListener(type,fn,false);//⾮IE} else{obj.detachEvent('on'+type,fn);//ie，这⾥已经加上on，传参的时候注意不要重复加了};}元素到浏览器边缘的距离：//在这⾥加个元素到浏览器边缘的距离，很实⽤function offsetTL(obj){//获取元素内容距离浏览器边框的距离（含边框）var ofL=0,ofT=0;while(obj){ofL+=obj.offsetLeft+obj.clientLeft;ofT+=obj.offsetTop+obj.clientTop;obj=obj.offsetParent;}return{left:ofL,top:ofT};}阻⽌事件传播：//js阻⽌事件传播，这⾥使⽤click事件为例document.onclick=function(e){var e=e||window.event;if (e.stopPropagation) {e.stopPropagation();//W3C标准}else{e.cancelBubble=true;//IE....}}阻⽌默认事件：//js阻⽌默认事件document.onclick=function(e){var e=e||window.event;if (e.preventDefault) {e.preventDefault();//W3C标准}else{e.returnValue='false';//IE..}}关于EVENT事件中的target：//关于event事件中的targetdocument.onmouseover=function(e){var e=e||window.event;var Target=e.target||e.srcElement;//获取target的兼容写法，后⾯的为IEvar from=e.relatedTarget||e.formElement;//⿏标来的地⽅，同样后⾯的为IE... var to=e.relatedTarget||e.toElement;//⿏标去的地⽅}⿏标滚轮滚动事件：//⿏标滚轮事件//⽕狐中的滚轮事件document.addEventListener("DOMMouseScroll",function(event){alert(event.detail);//若前滚的话为 -3，后滚的话为 3},false)//⾮⽕狐中的滚轮事件document.onmousewheel=function(event){alert(event.detail);//前滚：120，后滚：-120}。

浅析JavaScript中浏览器的兼容问题_javascript技巧

浅析JavaScript中浏览器的兼容问题_javascript技巧浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。

我们在讲老版本浏览器兼容问题之前，首先要了解什么是能力检测，它是来检测浏览器有没有这种能力，即判断当前浏览器是否支持要调用的属性或者方法。

下面做了一些简短的介绍。

1、innerText和innerContent1）innerText 和 innerContent 的作用相同2）innerText IE8之前的浏览器支持3）innerContent 老版本的Firefox支持4）新版本的浏览器两种方式都支持1 // 老版本浏览器兼容 innerText 和 innerContent2 if (element.textContent) {3 return element.textContent ;4 } else {5 return element.innerText;6 }2、获取兄弟节点/元素的兼容性问题1）兄弟节点，所有浏览器都支持①nextSibling下一个兄弟节点，可能是非元素节点；会获取到文本节点②previousSibling上一个兄弟节点，可能是非元素节点；会获取到文本节点2）兄弟元素，IE8以前不支持①previousElementSibling 获取上一个紧邻的兄弟元素，会忽略空白②nextElementSibling 获取下一个紧邻的兄弟元素，会忽略空白//兼容浏览器// 获取下一个紧邻的兄弟元素function getNextElement(element) {// 能力检测if(element.nextElementSibling) { return element.nextElementSibling;} else {var node = element.nextSibling;while(node && node.nodeType !== 1) { node = node.nextibling;}return node;}}/*** 返回上一个元素* @param element* @returns {*}*/function getPreviousElement(element) { if(element.previousElementSibling) { return element.previousElementSibling; }else {var el = element.previousSibling; while(el && el.nodeType !== 1) {el = el.previousSibling;}return el;}}/*** 返回第一个元素firstElementChild的浏览器兼容* @param parent* @returns {*}*/function getFirstElement(parent) {if(parent.firstElementChild) {return parent.firstElementChild;}else {var el = parent.firstChild;while(el && el.nodeType !== 1) {el = el.nextSibling;}return el;}}/*** 返回最后一个元素* @param parent* @returns {*}*/function getLastElement(parent) {if(stElementChild) {return stElementChild;}else {var el = stChild;while(el && el.nodeType !== 1) {el = el.previousSibling;}return el;}}/***获取当前元素的所有兄弟元素* @param element* @returns {Array}*/function sibling(element) {if(!element) return ;var elements = [ ];var el = element.previousSibling;while(el) {if(el.nodeType === 1) {elements.push(el);}el = el.previousSibling;}el = element.previousSibling;while(el ) {if(el.nodeType === 1) {elements.push(el);}el = el.nextSibling;}return elements;}3、array.filter();// 使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组// 兼容旧环境if (!Array.prototype.filter){Array.prototype.filter = function(fun /*, thisArg */){"use strict";if (this === void 0 || this === null)throw new TypeError();var t = Object(this);var len = t.length >>> 0;if (typeof fun !== "function")throw new TypeError();var res = [];var thisArg = arguments.length >= 2 ? arguments[1] : void 0;for (var i = 0; i < len; i++){if (i in t){var val = t[i];// NOTE: Technically this should Object.defineProperty at // the next index, as push can be affected by// properties on Object.prototype and Array.prototype.// But that method's new, and collisions should be// rare, so use the more-compatible alternative.if (fun.call(thisArg, val, i, t))res.push(val);}}return res;};}4、array.forEach();// 遍历数组//兼容旧环境// Production steps of ECMA-262, Edition 5, 15.4.4.18// Reference: /#x15.4.4.18if (!Array.prototype.forEach) {Array.prototype.forEach = function(callback, thisArg) { var T, k;if (this == null) {throw new TypeError(' this is null or not defined');}// 1. Let O be the result of calling toObject() passing the // |this| value as the argument.var O = Object(this);// 2. Let lenValue be the result of calling the Get() internal // method of O with the argument "length".// 3. Let len be toUint32(lenValue).var len = O.length >>> 0;// 4. If isCallable(callback) is false, throw a TypeError exception. // See: /#x9.11if (typeof callback !== "function") {throw new TypeError(callback + ' is not a function');}// 5. If thisArg was supplied, let T be thisArg; else let// T be undefined.if (arguments.length > 1) {T = thisArg;}// 6. Let k be 0k = 0;// 7. Repeat, while k < lenwhile (k < len) {var kValue;// a. Let Pk be ToString(k).// This is implicit for LHS operands of the in operator// b. Let kPresent be the result of calling the HasProperty // internal method of O with argument Pk.// This step can be combined with c// c. If kPresent is true, thenif (k in O) {// i. Let kValue be the result of calling the Get internal// method of O with argument Pk.kValue = O[k];// ii. Call the Call internal method of callback with T as// the this value and argument list containing kValue, k, and O.callback.call(T, kValue, k, O);}// d. Increase k by 1.k++;}// 8. return undefined};}5、注册事件.addEventListener = function (type,listener,useCapture ) { };//第一个参数事件名称//第二个参数事件处理函数（监听者）//第三个参数 true捕获 false冒泡//IE9以后才支持// 兼容旧环境var EventTools = {addEventListener: function (element, eventName, listener) { //能力检测if(element.addEventListener) {element.addEventListener(eventName, listener,false);}else if(element.attachEvent) {element.attachEvent("on" + eventName, listener);}else{element["on" + eventName] = listener;}},// 想要移除事件，不能使用匿名函数removeEventListener: function (element, eventName, listene r) {if(element.removeEventListener) {element.removeEventListener(eventName,listener,false);}else if(element.detachEvent) { //IE8以前注册.attachEvent和移除事件.detachEventelement.detachEvent("on"+eventName,listener);}else{element["on" + eventName] = null;}}};6、事件对象1)事件参数e，就是事件对象，标准的获取方式btn.onclick = function(e) { }2)e.eventPhase 事件阶段，IE8以前不支持3)e.target 始终是触发事件的对象（点击的按钮）i）IE8以前 srcElementii）浏览器兼容var target = e.target || window.event.srcElement;// 获取事件对象兼容浏览器getEvent: function(e) {return e || window.event; // e事件对象标准的获取方式； window.event IE8以前获取事件对象的方式}// 兼容targetgetTarget: function(e) {return e.target || e.srcElement;}7、获取鼠标在页面上的位置①在可视区域中的位置： e.clientX e.clientY②在文档中的位置：i） e.pageX e.pageYii）浏览器兼容var scrollTop = document.documentElement.scrollT op || doc ument.body.scrollT op;var pageY = e.clientY + scrollTop;8、获取页面滚动的距离// 兼容浏览器var scrollTop = document.documentElement.scrollT op || doc ument.body.scrolltop;9、取消文本的选择// 兼容浏览器window.getSelection ? window.getSelection().removeAllRan ges() : document.selection.empty();【总结】这里只是做了一部分的小结，实际开发中也还会遇到各种浏览器兼容的问题。

js中常见的兼容问题

js中常见的兼容问题1. ⾮⾏内样式获取⾼级浏览器：getComputedStyle(obox.false)//获取所有属性IE浏览器obox.currentStyle//获取所有属性兼容写法function getStyle(ele,attr){//ele为获取元素，attr为属性。

javascript代码在浏览器IE和Firefox兼容性的16个问题

javascript代码在浏览器IE和Firefox兼容性的16个问题javascript代码在浏览器IE和Firefox兼容性的16个问题1. document.form.item 问题(1)现有问题：现有代码中存在许多document.formName.item("itemName") 这样的语句，不能在 MF 下运行(2)解决方法：改用 document.formName.elements["elementName"](3)其它参见 22. 集合类对象问题(1)现有问题：现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。

(2)解决方法：改用[] 作为下标运算。

如：document.forms("formName") 改为 document.forms["formName"]。

又如：document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1](3)其它3. window.event(1)现有问题：使用 window.event 无法在 MF 上运行(2)解决方法：MF 的event 只能在事件发生的现场使用，此问题暂无法解决。

可以这样变通：原代码(可在IE中运行)：<="" name="someButton" p="" type="button" value="提交"/>onclick="javascript:gotoSubmit()"/>...新代码(可在IE和MF中运行)：<="" name="someButton" p="" type="button" value="提交"/>onclick="javascript:gotoSubmit(event)"/>...此外，如果新代码中第一行不改，与老代码一样的话(即gotoSubmit 调用没有给参数)，则仍然只能在IE 中运行，但不会出错。

浏览器兼容的JS写法总结

浏览器兼容的JS写法总结，涵盖的内容很全面，感兴趣的小伙伴们可以参考一下一、元素查找问题1. document.all[name](1)现有问题：Firefox不支持document.all[name](2)解决方法：使用getElementsByName(name)，getElementById(id)等来替代。

2. 集合类对象问题(1)现有问题：IE中对许多集合类对象取用时可以用()，但在Firefox只能用[]。

如：IE中可以使用document.forms("formName")来返回名字为"formName"的Form，但在Firefox却行不通。

(2)解决方法：使用[]，上例中可以改为document.forms["formName"]3. HTML元素的ID在JavaScript可见(1)现有问题：IE中HTML元素中的ID可以作为document的下属对象变量名直接使用。

在Firefox中不能。

(2)解决方法：使用getElementById("idName")代替idName作为对象变量使用。

4. eval(idName)取得对象(1)现有问题：在IE中，利用eval(idName)可以取得ID为idName的HTML对象，在Firefox中不能。

(2)解决方法：用getElementById(idName) 代替eval(idName)。

 5. 变量名与某HTML对象ID相同(1)现有问题：在Firefox中，因为对象ID不作为HTML对象的名称，所以可以使用与HTML对象id相同的变量名，IE中不能。

(2)解决方法：在声明变量时，一律加上var，以避免歧义，这样在IE中亦可正常运行。

此外，最好不要取与HTML对象id相同的变量名，以减少错误。

注：3、4和5都属于同一类的问题。

6. Frame(1)现有问题：在IE中可以用window.top.frameId和window.top.frameName来得到该Frame所代表的Window，Firefox中只能用window.top.frameName。

JavaScriptFF与IE兼容性问题总结

JavaScriptFF与IE兼容性问题总结.doc JavaScript与IE兼容性问题总结引言随着Web技术的快速发展，JavaScript已成为前端开发中不可或缺的一部分。

然而，由于历史原因，Internet Explorer（IE）浏览器在JavaScript的支持上存在一些限制和差异，这给开发者带来了一定的挑战。

本文将总结JavaScript在IE浏览器中的兼容性问题，并提供一些解决方案。

浏览器版本与JavaScript支持IE浏览器经历了多个版本的迭代，每个版本对JavaScript的支持程度都有所不同。

从IE6到IE11，JavaScript的兼容性问题主要集中在以下几个方面：文档对象模型（DOM）：不同版本的IE对DOM的支持存在差异。

事件模型：IE使用自己的事件模型，与W3C标准存在差异。

CSS样式：IE对CSS的支持不完全符合W3C标准。

JavaScript ES5/ES6特性：IE对ES5和ES6的新特性支持不完全。

常见的兼容性问题1. 条件注释IE浏览器特有的条件注释是解决兼容性问题的一种方式，但它们会使HTML代码变得冗长。

!--[if lte IE 8]script src=ie8.js/script![endif]--2. 事件处理IE的事件模型与W3C标准不同，这可能导致事件处理上的差异。

attachEvent vs addEventListener：IE使用attachEvent，而现代浏览器使用addEventListener。

事件对象：IE的事件对象与W3C标准不同，例如event.srcElement vs event.target。

3. DOM操作IE在DOM操作上有一些特有的方法和属性，例如document.all和patMode。

4. CSS样式IE对CSS的支持不完全符合W3C标准，例如float属性在IE中表现为layout。

5. JavaScript新特性IE对ES5和ES6的新特性支持不完全，例如let、const、Promise、fetch等。

js处理浏览器兼容

js处理浏览器兼容
1、try catch
在try中执⾏我们的代码，如果在执⾏的过程中发⽣了异常信息，我们在catch中写代替的执⾏⽅案
前提：不兼容四位情况下，执⾏对应的代码，需要发⽣异常错误才可以检测到
弊端：不管兼不兼容，都要先执⾏不兼容的代码，相对来说浪费⼀些性能
2、利⽤是否为这个对象的⼀个属性，来检测是否兼容
例如：window.getComputedStyle这个属性，我们获取的属性值是⼀个[function]；⽽在IE7~8中是不兼容的，window下没有getComputedStyle这个属性，我们获取的属性值是undefined；
1）第⼀种写法
if(typeof window.getComputedStyle==="function"{
兼容
}else{
不兼容
}
2）第⼆种写法
if(window.getComputedStyle){
兼容
}else{
不兼容
}
3)第三种写法（性能相对略好）
if（getComputedStyle in window）{
兼容
}else{
不兼容
}
3、我们已知在哪些浏览器不兼容了，那么我们只需要单独的检测浏览器类型，然后在进⾏特殊处理即可
erAgent---->获取当前浏览器版本信息。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JS在IE和FF中的兼容性问题1. 对象问题1.1 Form对象现有问题：现有代码这获得form对象通过document.forms("formName")，这样使用在IE 能接受，MF 不能。

解决方法：改用作为下标运算。

改为document.forms["formName"]备注上述的改用作为下标运算中的formName是id而name1.2 HTML对象现有问题：在 IE 中，HTML 对象的 ID 能够作为 document 的下属对象变量名直接使用。

在 MF 中不能。

更有一种方式，在IE和MF都能够使用var f = document.forms["formName "];var o = f. itemId;1.3 DIV对象现有问题：在 IE 中，DIV对象能够使用ID作为对象变量名直接使用。

在 MF 中不能。

DivId.style.display = "none"解决方法：document.getElementById("DivId").style.display = "none"备注获得对象的方法不管是不是DIV对象，都使用getElementById方法。

参见1.21.4 关于frame现有问题在 IE中能够用window.testFrame取得该frame，mf中不行解决方法在frame的使用方面MF和IE的最主要的区别是：假如在frame标签中书写了以下属性：那么IE能够通过id或name访问这个frame对应的window对象而mf只能够通过name来访问这个frame对应的window对象例如假如上述frame标签写在最上层的window里面的htm里面，那么能够这样访问IE： window.top.frameId或window.top.frameName来访问这个window对象MF：只能这样window.top.frameName来访问这个window对象另外，在mf和ie中都能够使用window.top.document.getElementById("frameId")来访问frame标签并且能够通过window.top.document.getElementById("testFrame").src = 'xx.htm'来转换frame的内容也都能够通过window.top.frameName.location = 'xx.htm'来转换frame的内容1.5 窗口现有问题IE中能够通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是MF不支持。

解决办法直接使用window.open(pageURL,name,parameters)方式打开新窗口。

假如需要传递参数，能够使用frame或iframe。

2. 总结2.1 在JS中定义各种对象变量名时，尽量使用id，避免使用name。

在 IE 中，HTML 对象的 ID 能够作为 document 的下属对象变量名直接使用。

在 MF 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。

2.2 变量名和某 HTML 对象 id 相同的问题现有问题在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以能够使用和HTML 对象 id 相同的变量名，IE 中不能。

解决方法在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。

此外，最好不要取和 HTML 对象 id 相同的变量名，以减少错误。

1. document.allFirefox能够兼容document.all，但会生成一条警告。

能够用getElementById("*") 或 getElementByTagName("*)来代替但是对于document.all.length等属性，则完全不兼容。

2. parentElement这个也不兼容。

比方说，则应改成obj.parentNode.attributes.getNamedItem("name").nodeValue （不知道如何写得更简洁些）3. eventW3C不支持windows.event比方说:在IE里面.....function onMenuClick(){collapseMenu(event.srcElement);}工作正常。

但是在Firefox中，则改成：function onMenuClick(evt){if(evt == null)evt = window.event; // For IEvar srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用targetcollapseMenu(srcElement);}IE和FIREFOX在解析CSS方面的区别对高度的解析IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度Firefox：没有定义高度时，假如内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。

结论：大家在能够确定内容高度的情况下最好定义高度，假如真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！img对象alt和title的解析alt：当照片不存在或load错误时的提示；title：照片的tip说明。

在IE中假如没有定义title，alt也能够作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用结论：大家在定义img对象时，最后将alt和title对象都写全，确保在各种浏览器中都能正常使用其他的细节差别当您在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。

无论您用margin:0,还是border: 0来约束，都无济于事。

其实这里更有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块和块之间的空格是处理的。

也就是说一个div结束后要紧接着一个div写，中间不要有回车或空格。

不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

很不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片能够连起来。

但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。

我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。

IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

这只是一些简单的区别,在做布局和CSS设计时候能够综合考虑,但最为有效和简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错的表现.另外在模版的JS设计的时候也需要考虑两者对代码的兼容,以下是对IE和FIREFOX中JS的一些测试:以下以 IE 代替 Internet Explorer，以 MF 代替 Mozilla Firefox1. document.form.item 问题(1)现有问题：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行(2)解决方法：改用 document.formName.elements["elementName"](3)其他参见 22. 集合类对象问题(1)现有问题：现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。

(2)解决方法：改用 [] 作为下标运算。

如：document.forms("formName") 改为document.forms["formName"]。

又如：document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1](3)其他3. window.event(1)现有问题：使用 window.event 无法在 MF 上运行(2)解决方法：MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。

能够这样变通：原代码(可在IE中运行)：onclick="javascript:gotoSubmit()"/>...<script language="javascript">function gotoSubmit() {...alert(window.event); // use window.event...}</script>新代码(可在IE和MF中运行)：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中运行，但不会出错。

所以，这种方案 tpl 部分仍和老代码兼容。

////////////////////////////////////////////////////////// /////////////// 以下来自网友 llihua//事件处理函数function a(evt) { //FireFoxevt = evt? evt: window.event; //IEvar srcElem = (evt.target)? evt.target: evt.srcElement;//事件处理...}在连接事件处理函数的时候，能够用Inline HTML方式，也能够用Eventproperty方式定义。