Analysis of the difference between javascript css in IE and Firefox_javascript skills

1. Document.formName.item("itemName") problem
Problem description: Under IE, you can use document.formName.item("itemName") or document.formName.elements ["elementName" ]; Under Firefox, only document.formName.elements["elementName"] can be used.
Solution: Use document.formName.elements["elementName"] uniformly.

2. Problems with collection objects
Problem description: Under IE, you can use () or [] to obtain collection objects; under Firefox, you can only use [ ] to obtain collection objects. object.
Solution: Use [] uniformly to obtain collection objects.

3. Custom attribute issues
Problem description: Under IE, you can use the method of getting regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes. ;Under Firefox, you can only use getAttribute() to obtain custom attributes.
Solution: Get custom attributes through getAttribute().

4. eval("idName") problem
Problem description: Under IE, you can use eval("idName") or getElementById("idName") to get the id as idName HTML object; under Firefox, you can only use getElementById("idName") to obtain the HTML object with id as idName.
Solution: Use getElementById("idName") uniformly to obtain 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
Problem description: Under IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of document. Under Firefox Otherwise; under Firefox, you can use the same variable name as the HTML object ID, but not 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; when declaring variables, always add the var keyword to avoid ambiguity.

6. Const problem
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 .
Solution: Use the var keyword uniformly to define constants.

7. Problem with input.type attribute
Problem description: The input.type attribute under IE is read-only; but the input.type attribute under Firefox is read-write.
Solution: Do not modify the input.type attribute. If you must modify it, you can hide the original input first, and then insert a new input element at the same position.

8. Window.event problem
Problem description: window.event can only be run under IE, but not under Firefox. This is because Firefox’s event can only be run under Used at the scene of the incident.
Solution: Add the event parameter to the function where the event occurs, and use var myEvent = evt?evt:(window.event?window.event:null)
in the function body (assuming the formal parameter is evt) Example :

Copy code The code is as follows:

9. Problems with event.x and event.y
Problem description: Under IE, the even object has x and y attributes, but does not have pageX and pageY attributes; under Firefox, the even object has pageX , pageY attributes, but there are no x, y attributes.
Solution: var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
If you consider question 8, use myEvent instead Just replace event.

10. Event.srcElement problem
Problem description: Under IE, the even object has the srcElement attribute, but no target attribute; under Firefox, the even object has the target attribute, but no srcElement property.
Solution: Use srcObj = event.srcElement ? event.srcElement : event.target;
If you consider the 8th question, just use myEvent instead of event.

11. Window.location.href problem
Problem description: 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. Of course, you can also consider using the location.replace() method.

12. Modal and non-modal window issues
Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, they cannot .
Solution: Use window.open(pageURL,name,parameters) directly 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. If you need the parent window to control the child window, use var subWindow = window.open(pageURL,name,parameters); to obtain the newly opened window object.

13. Frame and iframe issues
Take the following frame as an example:

　(1)Access frame object
　IE: Use window.frameId or window.frameName to access this frame object;
　Firefox: Use window .frameName to access this frame object;
Solution: Use window.document.getElementById("frameId") uniformly to access this frame object;
(2) Switch frame content
In both IE and Firefox You can use window.document.getElementById("frameId").src = "52css.com.html" or window.frameName.location = "52css.com.html" to switch the content of the frame;
If you need to change the frame The parameters are passed back to the parent window. You can use the parent keyword in the frame to access the parent window.

14. Body loading problem
Problem description: Firefox’s body object exists before the body tag is fully read by the browser; while IE’s body object must It does not exist until the body tag has been fully read by the browser.
[Note] This issue has not been actually verified and will be modified after verification.
[Note] It has been verified that the above problem does not exist in IE6, Opera9 and FireFox2. A simple JS script can access all objects and elements that have been loaded before the script, even if the element has not been loaded yet.

15. Event delegation method
Problem description: Under IE, use document.body.onload = inject; where function inject() has been implemented before; in Firefox Next, use document.body.onload = inject();
Solution: Use document.body.onload=new Function('inject()'); or document.body.onload = function(){/* Here is the code */}
[Note] The difference between Function and function

16. The difference between accessed parent elements
Problem description: Under IE, use obj .parentElement or obj.parentNode accesses the parent node of obj; under Firefox, use obj.parentNode to access the parent node of obj.
Solution: Because both firefox and IE support DOM, they use obj.parentNode to access the parent node of obj.

Seventeen. cursor:hand VS cursor:pointer
Problem description: Firefox does not support hand, but IE supports pointer, both of which are hand instructions.
Solution: Use pointer uniformly.

18. Problems with innerText.
Problem description: innerText can work normally in IE, but innerText does not work in FireFox.
Solution: Use textContent instead of innerText in non-IE browsers.
Example:

Copy code The code is as follows:

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

[Note] innerHTML is also supported by IE, Firefox and other browsers, and others, such as outerHTML It is only supported by IE, so it is best not to use it.

19. Object width and height assignment problem
Problem description: Statements similar to obj.style.height = imgObj.height in FireFox are invalid.
Solution: Use obj.style.height = imgObj.height 'px'; Browsers have different operations on table tags. In IE, innerHTML assignment of table and tr is not allowed. When using js to add a tr, the appendChild method does not work.
Solution:


Copy code

The code is as follows: //Append one to the table Empty row: var row = otable.insertRow(-1); var cell = document.createElement("td");

cell.innerHTML = "";

cell.className = " XXXX";
row.appendChild(cell);


[Note] Since I rarely use JS to directly operate tables, I have never encountered this problem. It is recommended to use JS framework to operate tables, such as JQuery.


21. Issues with indentation of ul and ol lists

When eliminating the indentation of lists such as ul and ol, the style should be written as: list-style:none;margin:0px; padding:0px;
　The margin attribute is valid for IE, and the padding attribute is valid for FireFox. ←This sentence is incorrectly expressed. For details, see ↓
　[Note] This issue has not been actually verified and will be modified after verification. [Note] It has been verified that in IE, setting margin:0px can remove the upper, lower, left and right indents, blanks, and list numbers or dots of the list. Setting padding has no effect on the style; in Firefox, setting margin:0px only You can remove the top and bottom spaces. After setting padding:0px, you can only remove the left and right indents. You must also set list-style:none to remove list numbers or dots. In other words, in IE, only margin:0px can be set to achieve the final effect, while in Firefox, margin:0px, padding:0px and list-style:none must be set at the same time to achieve the final effect.

22. CSS transparency issue

IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF：opacity:0.6.
[Note] It is best to write both and put the opacity attribute below.
23. CSS rounded corners problem

IE: versions below ie7 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 rounded corner problem is a classic problem in CSS. It is recommended to use the JQuery frame set to set rounded corners and leave these complex issues to others. There are too many problems in CSS, and even the same CSS definition has different display effects in different page standards. For more knowledge, please refer to the article on 52CSS.com. A suggestion that is in line with development is that the page should be written using the standard DHTML standard, with less use of tables. CSS definitions should be based on the standard DOM as much as possible, taking into account mainstream browsers such as IE, Firefox, and Opera. BTW, in many cases, the CSS interpretation standards of FF and Opera are closer to the CSS standards and more normative.