Discussion on the compatibility of IE and Firefox in JavaScript applications_javascript skills

1.document.formName.item("itemName") Problem

Note: Under IE, you can use document.formName.item("itemName") or document.formName.elements [ "elementName"]; Under Firefox, you can only use document.formName.elements["elementName"].
Solution: Use document.formName.elements["elementName"] uniformly.

2. Problem with collection objects

Explanation: Under IE, you can use () or [] to obtain collection objects; under Firefox, you can only use [] to obtain collection objects.
Solution : Uniformly use [] to obtain collection objects.

3. Custom attribute issues

Note: Under IE, you can use the method of obtaining regular attributes to obtain custom attributes Attributes, you can also use getAttribute() to get custom attributes; under Firefox, you can only use getAttribute() to get custom attributes.
Solution: Get custom attributes through getAttribute().

4.eval("idName") problem

Explanation: Under IE, you can use eval("idName") or getElementById("idName") to obtain the HTML object whose id is idName; Under Firefox, you can only use getElementById("idName") to get the HTML object with the id of idName.
Solution: Use getElementById("idName") to get the HTML object with the id of idName.

5. The problem that the variable name is the same as the ID of an HTML object

Explanation: Under IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document; it cannot be used under Firefox. Under Firefox , you can use the same variable name as the HTML object ID; this is not possible under IE.
Solution: Use document.getElementById("idName") instead of document.idName. It is best not to use variable names with the same HTML object ID to reduce errors; always add var when declaring variables to avoid ambiguity.

6.const problem

Explanation: Under Firefox, you can use the const keyword or the var keyword to define constants; under IE, you can only use the var keyword. Define constants.
Solution: Use the var keyword uniformly to define constants.

7. input.type attribute problem

Explanation: input.type under IE The attribute is read-only; but the input.type attribute under Firefox is read-write.

8.window.event problem

Explanation: window.event can only be used under IE Run, but cannot run under Firefox, because Firefox's event can only be used at the scene where the event occurs.
Solution:
IE:

Copy the code The code is as follows:

...

IE&Firefox:

Copy code The code is as follows:

...

9.event.x and event.y issues

Explanation: Under IE, the even object has x, y attributes, but no pageX, pageY attributes; under Firefox , the even object has pageX, pageY attributes, but no x, y attributes.
Solution: Use mX (mX = event.x ? event.x : event.pageX;) instead of event.x or Firefox under IE event.page The object has a target attribute, but no srcElement attribute.
Solution: Use obj (obj = event.srcElement ? event.srcElement : event.target;) instead of event.srcElement under IE or event.target under Firefox.

11.window.location.href problem

Explanation: Under IE or Firefox2.0.x, you can use window.location or window.location.href; Firefox1 .Under 5.x, only window.location can be used.
Solution: Use window.location instead of window.location.href.
12. Modal and non-modal window issues


Note: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; but not under Firefox.
Solution: Use window.open(pageURL,name, parameters) to open a new window. If you need to pass parameters in the 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:

(1) Access the frame object: IE: Use window.frameId or window.frameName to access this frame object.
Firefox: You can only use window .frameName to access this frame object.
In addition, you can use window.document.getElementById("frameId") in both IE and Firefox to access this frame object.

(2) Switch frame content:
In both IE and Firefox, you can use window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html" to switch the content of the frame.

If you need to pass the parameters in the frame back to the parent window, you can use parent in frme to access the parent window. For example: parent.document.form1.filename.value="Aqing";


14.body problem


Firefox’s body tag is not fully read by the browser It exists before entering; while IE's body must exist after the body tag is completely read by the browser.

For example: Firefox:



Copy code

The code is as follows:



IE&Firefox:

Copy code

The code is as follows:


15. Event delegation method

IE: document.body.onload = inject; //Function inject() has been implemented before this
Firefox: document.body .onload = inject();
Some people say the standard is:
document.body.onload=new Function('inject()');

16. firefox and IE(parentElement )'s parent element

IE: obj.parentElement
firefox: obj.parentNode
Solution: 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
Solution: Use pointer uniformly

18. innerText works normally in IE, but innerText does not work in FireFox.

Solution:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

19. Statements like obj.style.height = imgObj.height are invalid in FireFox

Solution:
obj.style.height = imgObj.height 'px';

20. IE, Firefox and other browsers have different operations on table tags, innerHTML for table and tr is not allowed in IE Assignment, when using js to add a tr, using the appendChile method does not work.

Solution:
//Append an empty row to the table:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

21. padding problem

padding 5px 4px 3px 1px FireFox cannot interpret the abbreviation and must be changed to padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22 . When eliminating the indentation of lists such as ul and ol,

style should be written as: list-style: none; margin: 0px; padding: 0px;
where the margin attribute is valid for IE and the padding attribute Valid for FireFox

23. CSS transparency

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

24. 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;.

25. 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;