浏览器中JS的兼容问题

合集下载

浏览器兼容的JS写法总结

浏览器兼容的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。

浏览器常用12种兼容问题(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的浏览器兼容性问题。

由于不同的浏览器对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不同浏览器差异和兼容⽅法浏览器兼容性是由多个不同浏览器同时存在导致的(浏览器内核、版本不同),这些浏览器在处理⼀个相同的页⾯时,表现有时会有差异,作为⼀个前端开发,处理兼容问题就成了我们必不可少的任务之⼀,下⾯将介绍⼀些处理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。

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

浅析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();【总结】这里只是做了一部分的小结,实际开发中也还会遇到各种浏览器兼容的问题。

JavaScriptFF与IE兼容性问题总结

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中常见的兼容问题

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

var a = "";if(ele.currentStyle){a = ele.currentStyle[attr];}else{a = getComputedStyle(ele,false)[attr];}return a;}2.事件对象的兼容var e=eve||window.event3.事件源的兼容e.target||e.srcElement4.事件冒泡的兼容⾼级浏览器e.stopPropagation()IEe.cancelBubble = true;兼容写法function stopBubble(e){if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble = true;}}5.获取键盘按下的值var code = e.keyCode||e.which6.阻⽌默认事件⾼级浏览器e.preventDefault()IEe.returnValue = false兼容写法function stopDefault(e){if(e.preventDefault){e.preventDefault()}else{e.returnValue = false;}}7.DOM2级事件绑定⾼级浏览器obox.addEventListener("click",fn)IEobox.attachEvent("onclick",fn)兼容写法//绑定兼容写法addEvent(obox,"click",fn1)function fn1(){console.log(1)}function addEvent(ele,type,cb){if(ele.addEventListener){ele.addEventListener(type,cb)}else if(ele.attachEvent){ele.attachEvent("on"+type,cb)}else{ele["on"+type] = cb;}}//删除的兼容removeEvent(obox,"click",fn1)function removeEvent(ele,type,cb){if(ele.removeEventListener){ele.removeEventListener(type,cb)}else if(ele.detachEvent){ele.detachEvent("on"+type,cb)} else{ele["on"+type] = null;}}8.window对象的属性:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth//可视区域的宽度:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight//可视区域的⾼度度:document.documentElement.scrollTop || document.body.scrollTop//页⾯滚动条距离顶部的距离:document.docimentElement.scrollLeft || document.body.scroll Left//页⾯滚动条距离左边的距离:。

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

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 中运行,但不会出错。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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 中不能。

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不支持。

解决办法直接使用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方式定义。

相关文档
最新文档