1. document.formName.item("itemName") Problem 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"].
Solution: Use document.formName.elements["elementName"] uniformly.
2. Collection object problem Description: Under IE, you can use () or [] to obtain collection objects; under Firefox, you can only use [ ] to obtain collection objects.
Solution: Use [] uniformly to obtain collection objects.
3. Custom attributes problem Description: Under IE, you can use the method of obtaining regular attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes; under Firefox, you can only use getAttribute() to obtain custom attributes.
Solution: Uniformly obtain custom attributes through getAttribute().
4. eval("idName") Problem Description: Under IE, you can use eval("idName") or getElementById("idName") to obtain the HTML object with the id idName; under Firefox, you can only use getElementById("idName" ) to obtain the HTML object with the id idName.
Solution: Use getElementById("idName") uniformly to obtain the HTML object with the id 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 the document, but not under Firefox; under Firefox, the variable with the same ID as the HTML object can be used. name, but not under IE.
Workaround: 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 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. Input.type attribute problem 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 Description of the problem: window.event can only be run under IE, but not under Firefox. This is because Firefox's event can only be used at the scene where the event occurs.
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:
program code
<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
</script>
9. Event.x and event.y Problem Description: Under IE, the even object has x and y attributes, but not pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but no x and y attributes.
Solution: var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
If you consider question 8, just use myEvent instead of event.
10. Event.srcElement problem Problem description: Under IE, the even object has the srcElement attribute, but not the target attribute; under Firefox, the even object has the target attribute, but does not have the srcElement attribute.
Solution: Use srcObj = event.srcElement ? event.srcElement : event.target;
If you consider question 8, 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; under Firefox1.5.x, you can 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 issues Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, this is not possible.
Solution: Directly use window.open(pageURL,name,parameters) method 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. The issue of frame and i frame takes the following frame as an example:
<frame src=" http://www.abc.com/123.html " id="frameId" name="frameName" />
(1) Access the frame object IE: use window.frameId or window.frameName to access the frame object;
Firefox: Use window.frameName to access this frame object;
Solution: Use window.document.getElementById("frameId") uniformly to access this frame object;
(2) To switch the frame content, you can use window.document.getElementById("frameId").src = "index.html" or window.frameName.location = "index.html" to switch the frame content in both IE and Firefox;
If you need to pass parameters in the frame 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 exist after the body tag is 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 explanation: under IE, use document.body.onload = inject; where function inject() has been implemented before; under Firefox, 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 Question description: Under IE, use obj.parentElement or obj.parentNode to access the parent node of obj; under Firefox, use obj.parentNode to access obj's parent node. parent node.
Solution: Because both firefox and IE support DOM, obj.parentNode is used to access the parent node of obj.
17. cursor:hand VS cursor:pointer
Description of the problem: Firefox does not support hand, but IE supports pointer. Both are hand instructions.
Solution: Use pointer uniformly.
18. Problems with innerText.
Problem description: innerText works normally in IE, but innerText does not work in FireFox.
Solution: Use textContent instead of innerText in non-IE browsers.
Example:
program code
if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
[Note] innerHTML is supported by browsers such as IE and Firefox at the same time. Others, such as outerHTML, are only supported by IE and are best not used.
19. Object width and height assignment problem Problem description: Statements similar to obj.style.height = imgObj.height in FireFox are invalid.
Solution: uniformly use obj.style.height = imgObj.height + 'px';
20. Table operation problem Problem description: IE, Firefox and other browsers have different operations on the table tag, which is not allowed in IE For the innerHTML assignment of table and tr, when using js to add a tr, using the appendChild method does not work.
Solution:
program code
//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);
[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. Indentation problem of ul and ol lists When eliminating the indentation of ul, ol and other lists, 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, please see ↓ for details
[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 can only remove the upper and lower indents. 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 problem 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. A suggestion that is in line with development is that the page should be written using standard DHTML standards, 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.