Different points of the IE and FF JS Collection

First, Document.formName.item ("itemname") problem
Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formName.elements ["ElementName"];firefox, Use only document.formname.elements["ElementName"].
Workaround: Use document.formname.elements["elementname" uniformly.

The problem of the collection class object
Problem description: Under IE, you can use () or [] get the Collection class object; Firefox can only use [] to get the collection class object.
WORKAROUND: Use [] uniformly to get the collection class object.

Iii. Custom Attribute Issues
Problem description: Under IE, you can get custom properties by using the method of getting the general properties, or you can use GetAttribute () to obtain the custom attributes, and under Firefox, you can only use getattribute () to derive the custom attributes.
Workaround: Unify through getattribute () to get the custom attributes.

Iv. eval ("Idname") issues
Problem description: Under IE, you can use eval ("Idname") or getElementById ("Idname") to get an HTML object with ID idname, and Firefox can only use getElementById ("Idname") to Gets an HTML object with ID idname.
Workaround: Unify the getElementById ("Idname") to obtain an HTML object with ID idname.

Problem with the same variable name as an HTML object ID
Problem description: Under IE, the ID of the HTML object can be used directly as the subordinate object variable name of document, Firefox can not be used, Firefox, under the same name as the HTML object ID, ie cannot.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take the same variable name as the HTML object ID to reduce the error, and when declaring the variable, add the var keyword to avoid ambiguity.

Vi. the problem of const
Problem Description: Under Firefox, you can use the Const keyword or the var keyword to define constants; Under IE, you can only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.

Vii. Input.type Attribute Problems
Problem Description: The Input.type property under IE is read-only, but the Input.type property in Firefox is read-write.
WORKAROUND: Do not modify the Input.type property. If you have to modify it, you can hide the original input and then insert a new INPUT element in the same location.

Viii. window.event Issues
Problem Description: Window.event can only run under IE, but not under Firefox, because Firefox event can only be used on the spot where events occur.
Workaround: Add an event parameter to the function that occurred on the incident, and use var myevent = Evt?evt in the function body (assuming the parameter is EVT): (Window.event?window.event:null)
Example: <input type= "button" onclick= "DoSomething (event)"/>
<script language= "JavaScript" >
function DoSomething (evt) {
var myevent = evt?evt: (window.event?window.event:null)
...
}

Ix. Event.x and EVENT.Y problems
Problem description: Under IE, even object has X, Y property, but no Pagex, Pagey property; Under Firefox, the even object has Pagex, Pagey properties, but no X, y properties.
Workaround: var myx = event.x? Event.x:event.pagex; var MyY = Event.y? Event.y:event.pagey;
If you consider question 8th, use MyEvent instead of event.

X. event.srcelement Problems
Problem description: Under IE, even object has Srcelement property, but no target property; Under Firefox, even object has the target property, but there is no srcelement attribute.
Workaround: Use Srcobj = event.srcelement? Event.srcElement:event.target;
If you consider question 8th, use MyEvent instead of event.

Xi. the question of window.location.href
Problem Description: Under IE or firefox2.0.x, you can use Window.location or window.location.href;firefox1.5.x, only use window.location.
WORKAROUND: Use window.location instead of window.location.href. Of course, you can also consider using the Location.replace () method.

12. Modal and non modal window problems
Problem description: Under IE, the modal and non-modal windows can be opened via ShowModalDialog and showModelessDialog; Firefox can't.
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. If you need a parent window to control the Subwindow, use var subwindow = window.open (pageurl,name,parameters); To get the newly opened window object.

13. Frame and IFRAME issues
Take the following frame as an example:
<frame src= "http://www.devdao.com/123.html" id= "Frameid" name= "FrameName"/>
(1) Accessing the Frame object
IE: Use Window.frameid or window.framename to access the frame object;
Firefox: Use Window.framename to access the frame object;
Workaround: Use Window.document.getElementById ("Frameid") to access the frame object uniformly;
(2) Toggle frame content
You can use Window.document.getElementById ("Frameid") in both IE and Firefox. src = "devdao.com.html" or window.frameName.location = " devdao.com.html "To switch the contents of the frame;
If you need to pass the parameters in the frame back to the parent window, you can use the parent keyword in the frame to access it.

14. Body Loading problem
Problem Description: The body object of Firefox exists before the body tag is fully read by the browser, while the body object of IE must exist after the body tag is fully read into the browser.
[note] This issue has not been verified and will be modified after verification.
[note] proven, IE6, Opera9, and FireFox2 do not have the above problem, the simple JS script can access all the objects and elements that have been loaded before the script, even if this element has not been loaded complete.

XV, event delegation method
Problem description: Under IE, use document.body.onload = inject; where function inject () has been implemented before, in Firefox, using document.body.onload = inject ();
Workaround: Use document.body.onload=new Function uniformly (' inject () '); or document.body.onload = function () {/* Here is the code */}
Note function and Function differences

16. The difference between the access parent element
Problem description: Under IE, use obj.parentelement or Obj.parentnode to access the parent node of obj; under Firefox, use Obj.parentnode to access the parent node of obj.
Workaround: Because both Firefox and IE support the DOM, the Obj.parentnode is used uniformly to access the parent node of obj.

17, Cursor:hand VS Cursor:pointer
Problem Description: Firefox does not support hand, but IE supports pointer, both are hand-shaped instructions.
Workaround: Use pointer uniformly.

18, innertext problem.
Problem description: InnerText in IE can work normally, but innertext in Firefox but not.
WORKAROUND: Use textcontent instead of innertext in non-IE browsers.
Example: if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). InnerText = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}
[note] InnerHTML at the same time by IE, Firefox and other browser support, and other, such as outerhtml only supported by IE, preferably not.

19. Object width and Height assignment problem
Problem Description: A statement similar to obj.style.height = Imgobj.height in Firefox is invalid.
Workaround: Unify the use of Obj.style.height = Imgobj.height + ' px ';

20, table operation problems
Problem description: IE, Firefox and other browsers for the table label operation is different, in IE does not allow 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:
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell); [note] Since I rarely use JS direct operation of the table, this problem has not been met. It is recommended to use the JS frameset to manipulate table, such as jquery.

21, UL and ol list indent problem
Eliminate the UL, OL and other list of indentation, the style should be written as: list-style:none;margin:0px;padding:0px;
Where the margin attribute is valid for IE, the Padding property is valid for Firefox. ← This sentence is wrong, see the details ↓
[note] This issue has not been verified and will be modified after verification.
[note] experience, in IE, set margin:0px can remove the list of the upper and lower left and right indent, blank and list number or dot, set padding has no effect on the style; in Firefox, setting margin:0px can only remove the upper and lower spaces, set padding : Only the left and right indents can be removed after 0px, and List-style:none must be set to remove the list number or dot. In other words, in IE, only set margin:0px can achieve the final effect, and in Firefox must be set margin:0px, padding:0px and list-style:none three items to achieve the final effect.

22, CSS transparency issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] It is best to write all two, and put the opacity attribute below.

Two or three, CSS fillet problem
Ie:ie7 The following versions do not support rounded corners.
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;.
[note] The fillet problem is a classic problem in CSS, and it is recommended to use the jquery frameset to set the fillet, leaving these complex questions to others.
There are too many questions about CSS, and even the same CSS definitions are not displayed in different page standards. For more information, please refer to Devdao.com's article. A development recommendation is that the page is written using standard DHTML standards, with less table,css defined as much as possible in accordance with the standard DOM, while taking into account the main browsers such as IE, Firefox, opera and so on. BTW, in many cases, the FF and Opera CSS interpretation standards are closer to the CSS standard, but also more normative.

Different points of the IE and FF JS Collection