`

【转载】IE与FireFox的js和css几处不同点

阅读更多
1.firefox不能对innerText支持。
firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了。如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替。

2.禁止选取网页内容:
在IE中一般用js:obj.onselectstart=function(){return false;}
而firefox用CSS:-moz-user-select:none

3.滤镜的支持(例:透明滤镜):
IE:filter:alpha(opacity=10);
firefox:-moz-opacity:.10;

4.捕获事件:
IE:obj.setCapture() 、obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true);
    document.removeEventListener("mousemove",mousemovefunction,true);

5.获取鼠标位置:
IE:event.clientX、event.clientY
firefox:需要事件函数传递事件对象
    obj.onmousemove=function(ev){
         X= ev.pageX;Y=ev.pageY;
    }

6.DIV等元素的边界问题:
比如:设置一个div的CSS::{width:100px;height:100px;border:#000000 1px solid;}
IE中:div的宽度(包括边框宽度):100px,div的高度(包括边框宽度):100px;
而firefox:div的宽度(包括边框宽度):102px,div的高度(包括边框宽度):102px;


所以在做这个兼容IE和firefox的拖动窗口时,在js和css的写法上要动点脑筋,给大家两个小技巧

一.判断浏览器类型:
var isIE=document.all? true:false;
我写了一个变量,如果支持document.all语法那么isIE=true,否则isIE=false

二.在不同浏览器下的CSS处理:
一般可以用!important来优先使用css语句(仅firefox支持)
比如:{border-width:0px!important;border-width:1px;}
在firefox下这个元素是没有边框的,在IE下边框宽度是1px

      1.document.formName.item("itemName") 问题
  问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"]。
  解决方法:统一使用document.formName.elements["elementName"]。

  2.集合类对象问题
  问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。
  解决方法:统一使用 [] 获取集合类对象。

  3.自定义属性问题
  问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性。
  解决方法:统一通过 getAttribute() 获取自定义属性。

  4.eval("idName")问题
  问题说明:IE下,可以使用 eval("idName") 或 getElementById("idName") 来取得 id 为 idName 的HTML对象;Firefox下,只能使用 getElementById("idName") 来取得 id 为 idName 的HTML对象。
  解决方法:统一用 getElementById("idName") 来取得 id 为 idName 的HTML对象。

  5.变量名与某HTML对象ID相同的问题
  问题说明:IE下,HTML对象的ID可以作为 document 的下属对象变量名直接使用,Firefox下则不能;Firefox下,可以使用与HTML对象ID相同的变量名,IE下则不能。
  解决方法:使用 document.getElementById("idName") 代替 document.idName。最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var关键字,以避免歧义。

  6.const问题
  问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量。
  解决方法:统一使用var关键字来定义常量。

  7.input.type属性问题
  问题说明:IE下 input.type 属性为只读;但是Firefox下 input.type 属性为读写。
       解决办法:不修改 input.type 属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。

  8.window.event问题
  问题说明:window.event 只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。
  解决方法:在事件发生的函数上加上event参数,在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
       示例:<input type="button" onclick="doSomething(event)"/>
  <script language="javascript">
  function doSomething(evt) {
  var myEvent = evt?evt:(window.event?window.event:null)
  ...
  }

       9.event.x与event.y问题
  问题说明:IE下,even对象有x、y属性,但是没有pageX、pageY属性;Firefox下,even对象有pageX、pageY属性,但是没有x、y属性。
  解决方法:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
       如果考虑第8条问题,就改用myEvent代替event即可。
       通用:两者都有event.clientX和event.clientY属性。

  10.event.srcElement问题
  问题说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
  解决方法:使用srcObj = event.srcElement ? event.srcElement : event.target;
       如果考虑第8条问题,就改用myEvent代替event即可。

  11.window.location.href问题
  问题说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location。
  解决方法:使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。

  12.模态和非模态窗口问题
  问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能。
  解决方法:直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
       如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话,使用var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

  13.frame和iframe问题
  以下面的frame为例:
  <frame src="xxx.html" id="frameId" name="frameName" />
  (1)访问frame对象
  IE:使用window.frameId或者window.frameName来访问这个frame对象;
  Firefox:使用window.frameName来访问这个frame对象;
       解决方法:统一使用 window.document.getElementById("frameId") 来访问这个frame对象;

  (2)切换frame内容
  在IE和Firefox中都可以使用window.document.getElementById("frameId").src="xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容;
  如果需要将frame中的参数传回父窗口,可以在frame中使用parent关键字来访问父窗口。

  14.body载入问题
  问题说明:Firefox的body对象在body标签没有被浏览器完全读入之前就存在;而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
       [注] 这个问题尚未实际验证,待验证后再来修改。
       [注] 经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。

  15. 事件委托方法
  问题说明:IE下,使用 document.body.onload = inject; 其中function inject()在这之前已被实现;在Firefox下,使用 document.body.onload = inject();
  解决方法:统一使用 document.body.onload=new Function('inject()'); 或者 document.body.onload = function(){/* 这里是代码 */}
       [注意] Function和function的区别

  16.访问的父元素的区别
  问题说明:在IE下,使用 obj.parentElement 或 obj.parentNode 访问obj的父结点;在firefox下,使用 obj.parentNode 访问obj的父结点。
  解决方法:因为firefox与IE都支持DOM,因此统一使用obj.parentNode 来访问obj的父结点。

  17.cursor:hand VS cursor:pointer
  问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。
  解决方法:统一使用pointer。

  18.innerText的问题.
       问题说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行。
       解决方法:在非IE浏览器中使用textContent代替innerText。
       示例:
  if(navigator.appName.indexOf("Explorer") >-1){
  document.getElementById('element').innerText = "my text";
  } else{
  document.getElementById('element').textContent = "my text";
  }
       [注] innerHTML 同时被ie、firefox等浏览器支持,其他的,如outerHTML等只被ie支持,最好不用。

  19. 对象宽高赋值问题
  问题说明:FireFox中类似 obj.style.height = imgObj.height 的语句无效。
       解决方法:统一使用 obj.style.height = imgObj.height + 'px';

  20. Table操作问题
       问题说明:ie、firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。
  解决方法:
  //向table追加一个空行:
  var row = otable.insertRow(-1);
  var cell = document.createElement("td");
  cell.innerHTML = "";
  cell.className = "XXXX";
  row.appendChild(cell);
       [注] 由于俺很少使用JS直接操作表格,这个问题没有遇见过。建议使用JS框架集来操作table,如JQuery。

  21. ul和ol列表缩进问题
  消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
  其中margin属性对IE有效,padding属性对FireFox有效。← 此句表述有误,详细见↓
       [注] 这个问题尚未实际验证,待验证后再来修改。
       [注] 经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在Firefox中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list-style:none才能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、padding:0px以及list-style:none三项才能达到最终效果。

  22. CSS透明问题
  IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
  FF:opacity:0.6。
       [注] 最好两个都写,并将opacity属性放在下面。

  23. CSS圆角问题
  IE:ie7以下版本不支持圆角。
  FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
       [注] 圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。

  关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是,页面采用标准DHTML标准编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器。BTW,很多情况下,FF和Opera的CSS解释标准更贴近CSS标准,也更具有规范性。


常用的js在ie和firefox兼容写法
1.获取控件用document.getElementById,不用document.all(FF等浏览器不支持)
2.<button> 会被firefox解释为提交form或者刷新页面,需要写标准<button type="button">
3.使用childNode()代替之前的children
4. 手型鼠标指针请用cursor:pointer,不用 cursor:hand
5.获取自己定义的属性 用  document.getElementByID("TD1").getAttribute("isOBJ")  代替document.getElementByID("TD1").isOBJ
6.事件追加方法attachEvent(IE)/detachEvent;addEventListener( Mozilla, Netscape, Firefox)/removeEventListener
  又或者直接用obj.onmouseover=func;
7.Firefox中不存在 Event时间,必须通过object本身去取
   在Firefox获取当前物件的坐标方法:
  document.onmousemove = Inti_move;
  function  Inti_move(ert)
{
  x=ert.pageX;
}
表4 Mozilla与IE之间的事件属性差异  Internet Explorer Name  Mozilla Name  Description 
altKey  altKey  Boolean property that returns whether the alt key was pressed during the event. 
cancelBubble  stopPropagation()  Used to stop the event from bubbling farther up the tree. 
clientX  clientX  The X coordinate of the event, in relation to the element viewport. 
clientY  clientY  The Y coordinate of the event, in relation to the element viewport. 
ctrlKey  ctrlKey  Boolean property that returns whether the Ctrl key was pressed during the event. 
fromElement  relatedTarget  For mouse events, this is the element from which the mouse moved away. 
keyCode  keyCode  For keyboard events, this is a number representing the key that was pressed. It is 0 for mouse events. 
returnValue  preventDefault()  Used to prevent the event's default action from occurring. 
screenX  screenX  The X coordinate of the event, in relation to the screen. 
screenY  screenY  The Y coordinate of the event, in relation to the screen. 
shiftKey  shiftKey  Boolean property that returns whether the Shift key was pressed during the event. 
srcElement  target  The element to which the event was originally dispatched. 
toElement  currentTarget  For mouse events, this is the element to which the mouse moved. 
type  type  Returns the name of the event. 

8>event.keyCode的問題解決
在FF中不存在window.event.keyCode屬性。可以用以下方法解決

function keepKeyNum(evt)
{
        var  k=window.event?evt.keyCode:evt.which;
        if ((k<=57) && (k>=48))
                {return true;}
        else
                {return false;}
} !input type="text" onKeyPress=" return keepKeyNum(event);" >

鼠标当前坐标(加上滚动条滚过的距离)
IE:event.offsetX和event.offsetY。
FF:event.layerX和event.layerY。
标签的x和y的坐标位置:style.posLeft 和 style.posTop
IE:有。
FF:没有。
通用:object.offsetLeft 和 object.offsetTop。

窗体的高度和宽度
IE:document.body.offsetWidth和document.body.offsetHeight。注意:此时页面一定要有body标签。
FF:window.innerWidth和window.innerHegiht,以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用:document.body.clientWidth和document.body.clientHeight。

添加事件
IE:element.attachEvent(”onclick”, func);。
FF:element.addEventListener(”click”, func, true)。
通用:element.onclick=func。虽然都可以使用onclick事件,但是onclick和上面两种方法的效果是不一样的, onclick只有执行一个过程,而attachEvent和addEventListener执行的是一个过程列表,也就是多个过程。例如: element.attachEvent(”onclick”, func1);element.attachEvent(”onclick”, func2)这样func1和func2都会被执行。

标签的自定义属性
IE:如果给标签div1定义了一个属性value,可以div1.value和div1[”value”]取得该值。
FF:不能用div1.value和div1[”value”]取。
通用:div1.getAttribute(”value”)。

父节点、子节点和删除节点
IE:parentElement、parement.children,element.romoveNode(true)。
FF:parentNode、parentNode.childNodes,node.parentNode.removeChild(node)。



FF和IE下的js兼容性问题(转)
做了几周的js兼容性,多少总结了几条经验,下面把ff下常用的替代写法和区别列举出来,大家共享。
1,document.getElementById替代document.all(ie适用)
2,集合[]替代()(ie适用)
3,target替代srcElement;parentNode替代parentElement(parentNode ie适用)
4,node.parentNode.removeChild(node)替代removeNode(this)(ie适用)
5,有空白文本节点(FF下会将空白文本解析为一个节点)
6,无outerHTML属性
7,事件局部变量e替代事件全局变量event
8,e.button键值有别于event.button,只有3个键值而无组合键值
9,无ondrag事件
10,DOMMouseScroll替代onmousewheel;-e.detail替代event.wheelDelta
11,addEventListener替代attachEvent;removeEventListener替代detachEvent
12,e.preventDefault()替代event.returnValue=false;e.stopPropagation()替代event.cancelBubble=true
13,style.top、style.left等严格检查"px"单位(加"px" ie适用)
14,style="-moz-opacity:0.9"替代style="filter:alpha(opacity=90)";无其它filter
15,style.cursor="pointer"替代style.cursor="hand"(ie适用)
16,title替代alt(ie适用)
17,状态栏默认不可修改,需调整ff设置
18,内置绘图功能以canvas或者SVG替代vml
19,代码出错时经常不报错(想来也是ff的无奈之举吧,如果每个ie独有的表达方式换在它里面都报错的话,怕是报都报不过来吧)
20,对缓存的清理非常不好
注:标明“ie适用”者为通用性建议写法,未标明者在ie里不适用。
分享到:
评论

相关推荐

    IE与FireFox的js和css几处不同点

    在JavaScript和CSS的世界里,IE(Internet Explorer)与Firefox(Mozilla Firefox)的实现存在一些显著差异,这在开发跨浏览器的Web应用时需要特别注意。以下是一些关键的区别点: 1. **innerText与textContent**:...

    javascript和css在IE和Firefox中的不同点

    JavaScript 和 CSS 在不同的浏览器上,特别是 Internet Explorer (IE) 和 Mozilla Firefox 之间存在一些差异,这些差异主要体现在解析规则、实现细节以及某些功能的支持上。理解这些差异对于编写跨浏览器兼容的代码...

    css和javascript在IE和Firefox中二十三个不同点

    CSS和JavaScript在Internet Explorer(IE)和Firefox这两个浏览器中存在诸多差异,这些差异主要体现在DOM操作、属性访问、事件处理等方面。以下是一些关键的不同点: 1. **文档对象模型(DOM)操作** - **form元素...

    javascript和css在IE和Firefox中的不同点及解决兼容性的方案

    JavaScript 和 CSS 在不同的浏览器之间可能存在兼容性问题,尤其是在 Internet Explorer (IE) 和 Mozilla Firefox 这两个浏览器中。本文将详细探讨这些差异,并提供相应的解决策略,以确保网站在各种浏览器中都能...

    IE火狐不同点集锦

    本文将深入探讨Internet Explorer(IE)与Mozilla Firefox(火狐)两大浏览器在JavaScript(JS)和CSS方面的差异,旨在帮助开发者更好地适配不同浏览器环境。 ### 一、IE与Firefox的JS和CSS处理差异 #### 1. PNG...

    firefox与IE对js和CSS的区别.txt

    ### Firefox与IE对JS和CSS的兼容性差异详解 #### 一、概述 随着Web技术的发展,浏览器成为了连接用户与互联网的重要桥梁。然而,不同浏览器对JavaScript(简称JS)及CSS的支持程度各不相同,这给前端开发人员带来...

    非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]

    通过以上总结可以看出,IE与Firefox在JS和CSS方面存在多处差异,开发者需要根据不同浏览器的特点进行适配,确保网页能够在不同环境下正确显示和运行。此外,在采用XHTML标准时,还需要特别注意DOM操作及属性访问的...

    js+css精美日历支持ie和firefox等浏览器

    3. **跨浏览器兼容性**:由于不同的浏览器对某些CSS属性和JavaScript特性支持程度不同,开发者需要确保代码能在IE、Firefox以及其他现代浏览器(如Chrome、Safari和Edge)上正常工作。这通常需要使用像`feature ...

    CSS兼容IE和Firefox的技巧集合

    然而,由于不同的浏览器对CSS规范的实现存在差异,特别是Internet Explorer(IE)与Firefox,开发者常常面临兼容性问题。本文将深入探讨解决CSS在IE和Firefox之间兼容性问题的一些关键技巧。 首先,理解盒模型差异...

    js在IE与firefox的差异集锦

    特别是在使用JavaScript编程语言时,IE和Firefox两个浏览器在很多方面的实现都存在差异。本文将详细介绍这些差异并提供相应的解决方法。 1. 关于innerText属性的支持: Firefox浏览器不支持innerText属性,而支持...

    ie与firefox兼容文档

    通过理解和运用这些知识点,开发者可以更好地处理IE与Firefox之间的兼容性问题,确保网站在不同浏览器上提供一致的用户体验。同时,随着Edge浏览器的普及和IE的逐渐淘汰,关注现代浏览器的兼容性也将变得更为重要。

    IE和Firefox浏览器CSS网页布局不同点

    【CSS网页布局在IE与Firefox中的差异】 网页布局是网页设计的核心部分,而CSS(层叠样式表)是实现布局的主要工具。然而,不同的浏览器在解析CSS时可能存在兼容性问题,尤其是在IE(Internet Explorer)和Firefox...

    Javascript在IE和FireFox中的兼容处理

    然而,由于不同浏览器的实现差异,特别是Internet Explorer(IE)和Firefox,开发者经常面临兼容性问题。以下是一些关键的JavaScript兼容处理策略: 1. **数组、集合类对象的元素访问** - IE支持`for...in`循环...

    Ie和firefox的Js区别

    JavaScript是一种广泛用于网页开发的脚本语言,它在不同的浏览器中有不同的实现,其中最显著的区别在于Internet Explorer(IE)和Mozilla Firefox(Firefox)。以下是一些关键的区别点: 1. **对象问题** - **...

    IE和Firefox差异参考大全

    在互联网的早期,IE(Internet Explorer)和Firefox(火狐浏览器)是两个主要的Web浏览平台,它们在处理CSS(层叠样式表)和JavaScript方面存在显著的差异。这些差异对于开发者来说至关重要,因为它们影响了网站在...

    CSS在IE6 IE7与FireFox下的兼容问题整理

    【CSS在IE6 IE7与FireFox下的兼容问题】 在Web开发中,CSS(层叠样式表)的兼容性问题一直是开发者面临的一大挑战,尤其是在早期的浏览器之间,如Internet Explorer (IE)的6、7版本和Firefox。这些浏览器对CSS标准...

    DOM文档和Javascript的IE和Firefox兼容性

    "Javascript的IE和Firefox兼容性"则涉及到JavaScript在不同浏览器中的行为一致性问题。Internet Explorer(IE)和Mozilla Firefox是两个历史悠久且具有广泛用户基础的浏览器,它们对JavaScript的支持存在差异,尤其...

    兼容ie和火狐的js分页

    本项目"兼容ie和火狐的js分页"旨在实现一个跨浏览器的JavaScript分页解决方案,确保在Internet Explorer(IE)和Firefox两大主流浏览器上都能正常运行。 首先,我们来理解一下核心知识点: 1. **JavaScript分页**...

    IE6、_IE7、IE8、Firefox兼容性问题

    以下是一些解决IE6、IE7、IE8和Firefox兼容性问题的方法和知识点: 1. **条件注释和doctype声明**: 在HTML中,可以使用条件注释(Conditional Comments)来针对特定版本的IE应用特定的CSS或脚本。例如,`...

Global site tag (gtag.js) - Google Analytics