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.item("itemName") or document.formName.elements ["elementName"]; under Firefox, you can only use document.formName.item("itemName") Using document .formName.elements["elementName"]. 2. Description of the problem of collection class object: In IE, you can use () or [] to obtain collection class objects; in Firefox, you can only use [] to obtain collection class objects. 3. Custom attribute problem description: In IE, you can use the method of obtaining regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; in Firefox, you can only use getAttribute() to get custom attributes. 4. Eval("idName") problem description: In IE, you can use eval("idName") or getElementById("idName") to obtain HTML object with idName; in Firefox, you can only use getElementById("idName" ) to obtain the HTML object with id as idName. 5. Problem with the same variable name as the HTML object ID: Under IE, the ID of the HTML object can be used directly as the variable name of the document's subordinate object, but not in Firefox; under Firefox, the same variable as the HTML object ID can be used. Name, IE cannot. 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. 7. Description of the problem of input.type attribute: The input.type attribute under IE is read-only; but the input.type attribute under Firefox is read-write. 8. Window.event problem description: window.event can only run under IE, not under Firefox, because Firefox event can only be used on the scene where the event occurs. Program code 10. Event.srcElement problem description: Under IE, the even object has a srcElement property, but no target property; under Firefox, the even object has a target property, but no srcElement property. 11. window.location.href 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. 12. Description of modal and non-modal window problems: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, it cannot. Thirteen. Frame and i frame problems. The following frame is as an example: 14. Body loading problem description: Firefox's body object exists before the body tag is fully read in by the browser; while IE's body object must exist after the body tag is fully read in by the browser. 15. Description of the event delegation method problem: In IE, use document.body.onload = inject; where function inject() has been implemented before this; in Firefox, use document.body.onload = inject(); 16. Disclosure of the difference between the accessed parent elements: In IE, use obj.parentElement or obj.parentNode to access obj's parent node; in firefox, use obj.parentNode to access obj's parent node. 17. cursor:hand VS cursor:pointer 18. The problem of innerText. Program code 19. Description of the problem of object width and height assignment: The statement similar to obj.style.height = imgObj.height in FireFox is invalid. 20. Table operation problem description: ie, firefox and other browsers have different operations on table tags. In ie, it is not allowed to assign innerHTML values to table and tr. When using js, use appendChild method to use Nothing works. 21. When the indentation problem of ul and ol lists is eliminated, the style should be written as: list-style:none; margin:0px; padding:0px; 22. CSS transparency problem IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60). 23. CSS rounded corner problem IE: The following versions of ie7 do not support rounded corners. There are too many questions about CSS, and even the same CSS definitions have different display effects in different page standards. A suitable suggestion is that the page is written in the standard DHTML standard, and the use of tables is rarely used. The CSS definition should be based on the standard DOM as much as possible, and the mainstream browsers such as IE, Firefox, and Opera are also taken into account. BTW, in many cases, the CSS interpretation standards of FF and Opera are closer to the CSS standards and are more standardized.
Solution: Use document.formName.elements["elementName"] in a unified manner.
Solution: Use [] to obtain collection class objects in a unified manner.
Workaround: uniformly obtain custom attributes through getAttribute().
Solution: Use getElementById("idName") to obtain the HTML object with id as idName.
Workaround: Use document.getElementById("idName") instead of document.idName. It is best not to take variable names with the same HTML object ID to reduce errors; when declaring variables, add the var keyword to avoid ambiguity.
Solution: Use the var keyword to define constants uniformly.
Solution: Do not modify the input.type property. If you have to modify it, you can first hide the original input and then insert a new input element in the same position.
Solution: Add event parameters to the function where the event occurs, and use var myEvent = evt?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)
...
}
</script>
9. Event.x and event.y problem description: Under IE, the even object has x and y attributes, but no 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 the 8th issue, just use myEvent instead of event.
Solution: Use srcObj = event.srcElement ? event.srcElement : event.target;
If you consider the 8th issue, just use myEvent instead of event.
Workaround: Use window.location instead of window.location.href. Of course, you can also consider using the location.replace() method.
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. If the parent window needs to control the child window, use var subWindow = window.open(pageURL, name, parameters); to obtain the newly opened window object.
<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 this frame object;
Firefox: Use window.frameName to access this frame object;
Solution: Use window.document.getElementById("frameId") to access this frame object;
(2) Switch frame content In both IE and Firefox, you can use window.document.getElementById("frameId").src = "index.html" or window.frameName.location = "index.html" to switch fram contents of e;
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.
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It has been proved that the above problems do 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 this element has not been loaded yet.
Solution: Use document.body.onload=new Function('inject()'); or document.body.onload = function(){/* Here is the code*/}
[Note] The difference between Function and Function
Solution: Because both firefox and IE support DOM, obj.parentNode is used to access obj's parent node.
Problem description: Firefox does not support hand, but ie supports pointer, both are hand-shaped indicators.
Solution: Use pointer in a unified way.
Problem description: innerText works properly in IE, but innerText does not work in FireFox.
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 is supported by browsers such as ie and firefox. Others, such as outerHTML, are only supported by ie, so it is best not to use it.
Solution: Use obj.style.height = imgObj.height + 'px' in uniform;
Solution:
Program code
//Add 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 to operate tables directly, I have never encountered this problem. It is recommended to use JS framework sets to manipulate tables, such as JQuery.
The margin attribute is valid for IE and the padding attribute is valid for FireFox. ← This sentence is incorrect, see for details↓
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] Proven that in IE, setting margin:0px can remove the up, down, left and right indentation, blank, list number or dots of the list, and setting padding has no effect on the style; in Firefox, setting margin:0px can only remove the up and down The blank space can only remove left and right indentation after setting padding: 0px. You must also set list-style:none to remove list number or dots. In other words, in IE, you can achieve the final effect by simply setting margin:0px, padding:0px and list-style:none must be set at the same time in Firefox to achieve the final effect.
FF: opacity: 0.6.
[Note] It is best to write both and place the opacity attribute below.
FF: -moz-border-radius:4px, or -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-bord er- radius- bottomright:4px;.
[Note] The rounded corner problem is a classic problem in CSS. It is recommended to use the JQuery framework set to set rounded corners to leave these complex problems for others to think about.