The difference between Firefox and IE for JavaScript and CSS

1. Document.formName.item ("ItemName") issues
Description: Under IE, you can use Document.formName.item ("ItemName") or document.formname.elements["elementname"];
Under Firefox, you can only use document.formname.elements["ElementName".
Workaround: Use document.formname.elements["elementname" uniformly.

2. Collection Class object issues
Description: Under IE, you can use () or [] get the Collection class object; Under Firefox, you can only use [] to get collection class objects.
WORKAROUND: Use [] uniformly to get the collection class object.

3.Custom Attribute Issues
Description: IEunder,you can get custom properties by using methods that get general properties,You can also usegetattribute ()Get Custom Properties; Firefoxunder,can only usegetattribute ()Get Custom Properties.
Workaround:Unified Adoptiongetattribute ()Get Custom Properties.

4.eval ("Idname")problem
Description: IEunder,,can useeval ("Idname")orgetElementById ("Idname")to obtainIDto beIdnameof theHTMLObject; Firefoxonly use thegetElementById ("Idname")to obtainIDto beIdnameof theHTMLObject.
Workaround:Unified UsegetElementById ("Idname")to obtainIDto beIdnameof theHTMLObject.

5.the variable name is associated with aHTMLObjectIDthe same problem
Description: IEunder, HTMLobject thatIDcan be used asDocumentthe Subordinate object variable name is used directly; FirefoxThe next is not. Firefoxunder,can be used withHTMLObjectIDthe same variable name; IEThe next is not.
Workaround:Usedocument.getElementById ("Idname")ReplaceDocument.idname.Better not takeHTMLObjectIDthe same variable name,to reduce errors;when declaring a variable,All plusvar,to avoid ambiguity.

6.constproblem
Description: Firefoxunder,can useConstkeyword orvarkeyword to define constants; IEunder,can only usevarkeyword to define constants.
Workaround:Unified Usevarkeyword to define constants.

7.input.typeProperty Issues
Description: IEunderInput.typeproperty is read-only;butFirefoxunderInput.typeproperty is read-write.

8.window.eventproblem
Description: Window.eventonly inIEunder Run,and not inFirefoxunder Run,this is becauseFirefoxof theEventcan only be used on the spot where the event occurred. Firefoxmust be added from sourceEventfor parameter passing. Ieignore this parameter and use thewindow.eventto read theEvent.
Workaround:
Ie&firefox:
Submitted (event) "/>... ..

JS Code

1 <script language= "JavaScript" >

2 function submitted (EVT) {

3 evt=evt?evt: (window.event?window.event:null);

4}

5 </script>

9.event.x and EVENT.Y problems
Description: Under IE, the even object has an X, y attribute but no pagex,pagey attribute; Under Firefox, the even object has the Pagex,pagey property, but there is no X, Y property.
Workaround: Use mx (mx = event.x event.x:event.pagex;) to replace the event.x under IE or the Event.pagex under Firefox.

10.event.srcelement problems
Description: Under IE, the event object has a srcelement attribute, but no target attribute; Under Firefox, the even object has the target property, but there is no srcelement property.
Workaround: Use obj (obj = event.srcelement event.srcElement:event.target;) instead of the event.srcelement under IE or the Event.target under Firefox. Please also be aware of compatibility issues with event.

11.window.location.href problems
Description: Under IE or firefox2.0.x, you can use window.location or window.location.href; firefox1.5.x, you can only use window.location.
WORKAROUND: Use window.location instead of window.location.href.

12. Modal and non-modal window problems
Description: Under IE, the modal and non-modal windows can be opened by ShowModalDialog and showModelessDialog; Firefox is not.
WORKAROUND: Open a new window directly using window.open (pageurl,name,parameters).
If you need to pass parameters from a child window back to the parent window, you can use Window.opener in the child window to access the parent window. For example: var Parwin = Window.opener;parwin.document.getelementbyid ("aqing"). Value = "aqing";

13.frame problem
Take the following frame as an example:
<frame xsrc= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) To access the Frame object:
IE: Use Window.frameid or window.framename to access the frame object. Frameid and FrameName can have the same name.
Firefox: Only use Window.framename to access this frame object.
In addition, Window.document.getElementById ("Frameid") can be used in both IE and Firefox to access the frame object.
(2) Switch frame content:
You can use Window.document.getElementById ("Testframe") in both IE and Firefox. src = "xxx.html" or window.frameName.location = " Xxx.html "to toggle the contents of the frame.
If you need to pass the arguments in the frame back to the parent window (note that it is not opener, but the parent frame), you can use parent in frme to access the parent window. For example: parent.document.form1.filename.value= "aqing";

14.body problem
The body of Firefox exists before the body tag is fully read by the browser, while the body of IE must be fully read into the body tag.

15. Event Delegation Method
IE:document.body.onload = inject; Function inject () has been implemented prior to this
Firefox:document.body.onload = inject ();

The difference between Firefox and IE's parent element (parentelement)
IE:obj.parentElement
Firefox:obj.parentNode
Workaround: Because both Firefox and IE support DOM, using Obj.parentnode is a good choice.

17.cursor:hand VS Cursor:pointer
Firefox does not support hand, but IE supports pointer
Workaround: Use pointer uniformly

18.innerText works in IE, but innertext is not available in Firefox. Need textcontent.
Workaround:

JS Code

if (Navigator.appName.indexOf ("explorer") >-1) {

document.getElementById (' element '). InnerText = "my text";

} Else{

document.getElementById (' element '). Textcontent = "my text";

}

All positional and font size values must be followed by PX when setting the style of the HTML tag in Firefox. This IE is also supported.

Ie,firefox and other browsers for table label operation are different, in IE not allowed to the table and TR innerHTML assignment, using JS to add a TR, using the AppendChild method is not used.
Workaround:
Append a blank line to the table:

JS Code

var row = Otable.insertrow (-1);

var cell = document.createelement ("TD");

cell.innerhtml = "";

Cell.classname = "XXXX";

Row.appendchild (cell);

Padding questions
padding 5px 4px 3px 1px Firefox cannot explain shorthand,
Must be changed into padding-top:5px; padding-right:4px; padding-bottom:3px;padding-left:1px;

22. Eliminate the indentation of UL, OL and other lists
The style should be written as: list-style:none;margin:0px;padding:0px;
Where the margin attribute is valid for IE, the padding attribute is valid for Firefox

CSS Transparency
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.

CSS rounded Corners
IE: Rounded corners are not supported.
FF:-moz-border-radius:4px, or-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;- moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;.

CSS double-line bump border
ie:border:2px outset;.
FF:-moz-border-top-colors: #d4d0c8white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors: #404040 # 808080;-moz-border-bottom-colors: #404040 #808080;

26. Options collection operation for select
The enumeration element is also available in addition to [] SelectName.options.item (), and selectname.options.length,selectname.options.add/remove can be used on both browsers. Notice that the element is assigned after add, otherwise it will fail (I am experimenting with this).

The difference between the XMLHTTP.

JS Code

Mf

if (Window. XMLHttpRequest)//MF

{

xmlhttp=New XMLHttpRequest ()

xmlHTTP.

Xmlhttp.open ("GET", url,true)

Xmlhttp.send (null)

}

Ie

Else if (Window. ActiveXObject)//code for IE

{

xmlhttp=New ActiveXObject ("Microsoft.XMLHTTP")

if (XMLHTTP)

{

xmlHTTP.

Xmlhttp.open ("GET", url,true)

Xmlhttp.send ()

}    

}

What's the difference between innerHTML?
Firefox does not support innerHTML, the solution can be as follows

JS Code

RNG = Document.createrange ();

el = document.getElementById (ElementID);

Rng.setstartbefore (EL);

Htmlfrag =rng.createcontextualfragment (content);

while (El.haschildnodes ())//Clear original content, add new content

El.removechild (El.lastchild);

El.appendchild (Htmlfrag);

IMG SRC Refresh Issue
Under IE you can use You can refresh the picture, but not in Firefox. The main problem is caching, which is solved by adding a random number after the address. Edit the onclick event code as follows: "This.src=this.src+ '?" +math.random () "

The difference between Firefox and IE for JavaScript and CSS