About JS compatibility between FF and IE

FF Firebug, not only can test JS can also check CSS errors, is generally used.
But it is mainly to check the FF error, IE is powerless.
To test IE, use ietester, it can test almost all versions of IE (1.0 I'm afraid it won't be tested), usage is also very convenient.

As for JS to different browser compatibility considerations, indeed a lot, the following is only part of you, general advice or use jquery,prototype and so on some have already processed a compatible script library, more importantly, they simplify a lot of operations, but also provides the usual you are difficult to implement enhancements. You can search this article for instructions.

JS Compatible browser ff/ie tips

JavaScript is inevitably used in the development of BS, and each browser has different support for JavaScript. This requires our programmers to be compatible with them,
Otherwise, some browsers won't be able to run our code. Will create a customer complaint, if let boss know, this is not very good oh.
The following is compatible with IE and FF JS scripting practices and decomposition (selected from the Internet, after I organize), I hope to be helpful to everyone.
Instead of Internet Explorer, MF/FF replaces Mozzila Firefox with the following.
Window.event
IE: There are window.event objects
FF: No Window.event object. You can pass an event object to a function's arguments. such as Onmousemove=domousemove (event)
Workaround: var event = Event | | window.event;
Example
<script>
function test (event) {
var event = Event | | window.event;
Do Something
}
</script>
<input type= "button" value= "click" onclick= "Test (event)"/>
Current mouse coordinates
Ie:event.x and Event.y.
FF:event.pageX and Event.pagey.
Generic: Both have Event.clientx and Event.clienty properties.
The current coordinates of the mouse (plus the distance that the scroll bars are rolled over)
IE:event.offsetX and Event.offsety.
FF:event.layerX and Event.layery.
Workaround:
<script>
function test (event) {
var event = Event | | window.event;
or var event = event? event:window.event;//is available in 2, and can be used if else (this shorthand)
var x = Event.offsetx | | Event.layerx;
var y = event.offsety | | Event.layery;
Do Something
}
</script>
<div onmousedown= "Test (event)" ></div>

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,
However, there is no srcelement attribute.
Workaround: Use obj (obj = event.srcelement event.srcElement:event.target;) instead of the event.srcelement under IE or
Event.target in Firefox. Please also note the compatibility of the event.
Event.toelement problems
Problem:
Under IE, even object has Srcelement property, but no target property, Firefox, even object has target property, but no srcelement
Of
Workaround:
var target = E.relatedtarget | | E.toelement;
coordinates of X and y of the label: Style.posleft and Style.postop
IE: there is.
FF: No.
General: Object.offsetleft and Object.offsettop.
The height and width of the form
IE:document.body.offsetWidth and Document.body.offsetHeight. Note: This page must have a body tag.
FF:windows.innerWidth and Windows.innerhegiht, as well as Document.documentElement.clientWidth and document.documentElement.clientHeight.
General: Document.body.clientWidth and Document.body.clientHeight.
Add Event
IE:element.attachEvent ("onclick", function);.
FF:element.addEventListener ("Click", Function, True).
General: Element.onclick=function. Although you can use the OnClick event, the effect of the onclick and the above two methods is different,
The onclick only executes a procedure, while Attachevent and AddEventListener perform a list of processes, which is a process. For example: Element.attachevent ("onclick", func1), Element.attachevent ("onclick", Func2) such func1 and FUNC2 will be executed.
Custom Properties for labels
IE: If you define a property value for the tag div1, you can div1.value and div1["value" to get the value.
FF: cannot be taken with Div1.value and div1["value").
Generic: Div1.getattribute ("value").
Document.form.item problems
IE: Existing problem: There are many Document.formName.item ("itemname") statements in existing code that cannot be run in MF
ff/ie:document.formname.elements["ElementName"]
Collection/Array Class object issues
(1) Existing problems:
Many collection class objects in existing code use (), IE can accept, MF cannot.
(2) Workaround:
Instead, use [] as the subscript operation. such as: Document.forms ("FormName") changed to document.forms["FormName"].
Another example: Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]
An issue with the ID of an HTML object as an object name
(1) Existing problems
In IE, the ID of an HTML object can be used directly as a subordinate object variable name for document. Not in MF.
(2) Workaround
Use getElementById ("Idname") instead of Idname as an object variable
Problem with Idname string to get Object
(1) Existing problems
In IE, Eval_r (idname) can be used to obtain an HTML object with ID idname, which cannot be in MF.
(2) Workaround
Replace Eval_r (Idname) with getElementById (Idname).
Problem with the same variable name as an HTML object ID
(1) Existing problems
In MF, because the object ID is not the name of an HTML object, you can use the same variable name as the HTML object ID, which is not available in IE.
(2) Workaround
When declaring variables, add var to avoid ambiguity, which can be run normally in IE.
In addition, it is best not to take the same variable name as the HTML object ID to reduce the error.
Questions of Document.getelementsbyname () and Document.all[name]
Existing problem: In IE, Getelementsbyname (), Document.all[name] cannot be used to get DIV elements
(if there are other elements that cannot be taken, it is not known yet).
document.all
Firefox can be compatible with document.all, but generates a warning. can use getElementById ("*")
or Getelementbytagname ("*") to replace
However, for properties such as Document.all.length, it is completely incompatible
Input.type Property Issues
Description: The Input.type property under IE is read-only, but the Input.type property in Firefox reads and writes
Window.location.href problems
Description: Under IE or firefox2.0.x, you can use window.location or window.location.href; Under the firefox1.5.x,
Only use window.location
WORKAROUND: Use window.location instead of window.location.href
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.getElementByIdx_x ("aqing"). Value = "aqing";
Frame problem
Take the following frame as an example:
<frame src= "xxx.html" mce_src= "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.
FF: Only use Window.framename to access the frame object.
In addition, window.document.getElementByIdx_x ("Frameid") can be used in both IE and Firefox to access the frame object.
(2) Switch frame content:
You can use Window.document.getElementByIdx_x ("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: window.parent.document.form1.filename.value= "aqing";
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 by the browser before the body tag is present.
Event Delegate Method
IE:document.body.onload = inject; Function inject () has been implemented prior to this
FF:document.body.onload = inject ();
The difference between Firefox and IE's parent element (parentelement)
IE:obj.parentElement
FF:obj.parentNode
WORKAROUND: Because both FF and IE support DOM, using Obj.parentnode is a good choice
InnerText in IE can work normally, but innertext in Firefox but not. Requires textcontent
When you set the style of an HTML tag in Firefox, all positional and font size values must be followed by PX. This IE is also supported by
Parent node, child node, and delete node
Ie:parentelement, Parement.children,element.romovenode (true).
Ff:parentnode, Parentnode.childnodes,node.parentnode.removechild (node).
Options collection Operations on 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.
Note the element is assigned after add, otherwise it will fail
To dynamically delete all options in select:
Document.getelementbyidx_x ("Ddlresourcetype"). options.length=0;
To dynamically delete an item in Select option:
Document.getelementbyidx_x ("Ddlresourcetype"). Options.remove (indx);
To dynamically add an item in a SELECT option:
Document.getelementbyidx_x ("Ddlresourcetype"). Options.add (New Option (Text,value));
IE FF Dynamic Delete general method:
Document.getelementbyidx_x ("Ddlresourcetype"). Options[indx] = null;
Capturing events
Problem:
FF has no setcapture (), ReleaseCapture () method
Workaround:
Ie:
Obj.setcapture ();
Obj.releasecapture ();
Ff:
Window.captureevents (event.mousemove| Event.mouseup);
Window.releaseevents (event.mousemove| Event.mouseup);
if (!window.captureevents) {
O.setcapture ();
}else {
Window.captureevents (event.mousemove| Event.mouseup);
}
if (!window.captureevents) {
O.releasecapture ();
}else {
Window.releaseevents (event.mousemove| Event.mouseup);
}
Prevent page content from being selected
Problem:
FF need to use CSS to prohibit, ie with JS Forbidden
Workaround:
IE:obj.onselectstart = function () {return false;}
FF:-moz-user-select:none;
Drawing
Ie:vml.
Ff:svg.
CSS: Transparent
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: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 White;
-moz-border-right-colors: #404040 #808080;-moz-border-bottom-colors: #404040 #808080;.

Back: Found an error, ie can use document.all, and FF can not use, IE and FF can use Document.getelementsbyname

Main:
Questions of Document.getelementsbyname () and Document.all[name]
Existing problem: In IE, Getelementsbyname (), Document.all[name] can not be used to obtain DIV elements (whether there are other elements not yet known).
document.all
Firefox can be compatible with document.all, but generates a warning. Can be replaced with getElementById ("*") or Getelementbytagname ("*"), but for properties such as Document.all.length, it is completely incompatible

About JS compatibility between FF and IE