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 class object problem
description: In IE, you can use () or [] to get the collection Class object; under Firefox, you can only use [] to obtain collection class objects.
Solution: Use [] to obtain collection class objects uniformly.
3. Custom attribute problem
description: Under IE, you can use the method of obtaining general 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() uniformly.
4.eval("idName") Problem
Description : Under IE, you can use eval("idName") or getElementById("idName") to get the HTML object whose id is idName; under Firefox, you can only use getElementById("idName") to get the HTML object whose id is idName.
Solution method: Use getElementById("idName") uniformly to get the HTML object whose id is idName.
5. Description of the problem that the variable name is the same as the ID of an
HTML object: Under IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document; under Firefox, it cannot be used. Under Firefox, the same variable name as the HTML object ID can be used. ; IE cannot.
Solution: Use document.getElementById("idName") instead of document.idName. It is best not to take the variable name with the same HTML object ID to reduce errors; when declaring variables, always add var to avoid ambiguity.
7.input Description of the .type attribute problem
: The input.type attribute is read-only under IE; but the input.type attribute is read-write under Firefox.
9. Event.x and event.y problem
description: Under IE, the even object has x, y attributes, But there are no pageX, pageY properties; under Firefox, the even object has pageX, pageY properties, but no x, y properties.
Solution: Use mX (mX = event.x ? event.x : event.pageX;) instead of IE event.x or event.pageX under Firefox.
10.event.srcElement problem
description: under IE, the event object has the srcElement attribute, but no target attribute; under Firefox, the event object has the 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.
13. The frame problem
takes the following frame as an example:
<frame src="xxx.html" id="frameId" name="frameName" />
(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") to access this frame object in both IE and Firefox.
(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 change the frame The parameters in are passed back to the parent window, and parent can be used in frme to access the parent window. For example: parent.document.form1.filename.value="Aqing";
14.body problem
Firefox's body exists before the body tag is completely read by the browser; while IE's body must be completely read in the body tag by the browser. Exists after reading in.
For example:
Firefox:
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert (possibly);
}
</script>
</body>
IE&Firefox：
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert (possibly);
} </script>
15. Event delegate method
IE: document.body.onload = inject; //Function inject() has been implemented before this
Firefox: document.body.onload = inject();
Some say the standard is:
document.body.onload= new Function('inject()');
16. The difference between the parent elements of firefox and IE (parentElement)
IE: obj.parentElement
firefox: obj.parentNode
Solution: Because both firefox and IE support DOM, using obj.parentNode is Good choice.
17. innerText works fine 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";
}
18. The statement similar to obj.style.height = imgObj.height in FireFox is invalid
Solution:
obj.style.height = imgObj.height + 'px';
19. ie, firefox and other browsers have different operations on table tags Not the same. In IE, it is not allowed to assign values to the innerHTML of table and tr. When adding a tr with js, 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);
20. padding problem
padding 5px 4px 3px 1px FireFox cannot explain the shorthand,
must be changed to padding-top: 5px; padding-right: 4px; padding-bottom: 3px; padding-left: 1px;
21. Eliminate ul, ol and other lists When indenting, the
style should be written as: list-style:none;margin:0px;padding:0px;
the margin property is valid for IE, and the padding property is valid for FireFox
22. CSS transparent
IE: filter:progid:DXImageTransform.Microsoft.Alpha(style =0,opacity=60).
FF: opacity: 0.6.
23. 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;.
24. 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;
25．ie supports document.all and firefox does not support
using one of the following three tags instead of document.all
getElementsByTagName("tagName") //You can get a collection of all tag elements
getElementById("idName") //You can get an element by id
getElementsByName("Name") // You can get an element by the name attribute
26. The method of using innerHTML in firefox
<div id="online"></div>
document.all.online.innerHTML; //This method can be used in IE, but it is not a standard method
document.getElementById("online").innerHTML; //This way firefox can use innerHTML
27. eval() and window.execScript() execute scripts
IE and firerox support eval(), but firefox does not support window.execScript()
Solution: use eval() uniformly
28. Rewrite the event handler
Solution: (Example): If the onclick() of document is rewritten, use document.onclick = function(){…}[/size][/size]