In the process of developing a multilingual Java Web site, it is found that many of the code in FF can run normally, but not in IE, and vice versa. The incompatible and unified methods of IE and Firefox (Firefox) in JavaScript are summarized as follows:
1. Firefox-compatible Outerhtml,ff no outerHTML method
Copy Code code as follows:
if (window. HtmlElement) {
htmlelement.prototype.__definesetter__ ("outerHTML", function (SHTML) {
var r=this.ownerdocument.createrange ();
R.setstartbefore (this);
var df=r.createcontextualfragment (SHTML);
This.parentNode.replaceChild (Df,this);
return SHTML;
});
htmlelement.prototype.__definegetter__ ("outerHTML", function () {
var attr;
var attrs=this.attributes;
var str= "<" +this.tagname.tolowercase ();
for (var i=0;i<attrs.length;i++) {= "" attr= "attrs[i];" if (attr.specified) = "str+=" "+attr.name+" = "' +attr.value+ '" '; = ' "}=" "if (!this.canhavechildren) =" "Return=" "str+" = ">";
return str+ ">" +this.innerhtml+ "";
});
htmlelement.prototype.__definegetter__ ("Canhavechildren", function () {
Switch (This.tagName.toLowerCase ()) {
Case "Area":
Case "Base":
Case "Basefont":
Case "Col":
Case "Frame":
Case "HR":
Case "IMG":
Case "BR":
Case "Input":
Case "Isindex":
Case "link":
Case "META":
Case "param":
return false;
}
return true;
});
}
2. Collection Class object Problem
Note: IE, you can use () or [] get the Collection class object; Firefox, you can only use [] to get Collection class objects. Workaround: Use [] to get collection class objects uniformly.
3. Custom attribute Issues
Note: Under IE, you can get the custom attribute by using the method of obtaining the General property, or you can use GetAttribute () to get the definition attribute. Under Firefox, you can only use getattribute () to get a defined attribute. Workaround: Unified through GetAttribute () is derived from the definition attribute.
4.eval ("idname") problem
Note: Under IE, you can use either eval ("Idname") or getElementById ("Idname") to obtain an HTML object with an ID of idname; Firefox can only use getElementById ("Idname") to get an HTML object with an ID of idname. WORKAROUND: Unify the getElementById ("Idname") to get the HTML object with the ID idname.
5. Variable name and an HTML object ID the same problem
Note: Under IE, the ID of HTML object can be used directly as the subordinate object variable name of document; Firefox is not. Firefox, you can use the same variable name as the HTML object ID, ie cannot. Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take a variable name with the same HTML object ID to reduce the error; When declaring a variable, add var to avoid ambiguity.
6.const Problem
Description: Firefox, you can use the Const keyword or the var keyword to define constants; ie, you can only use the var keyword to define constants. Workaround: Use the var keyword to define constants uniformly.
7.input.type Property Problem
Note: IE under the Input.type property is read-only, but Firefox under the Input.type property is read and write.
8.window.event Problem
Description: Window.event can only run under IE, but not under Firefox, this is because Firefox event can only be used on the spot where the incident occurred. Solution:
Ie:
<input name= "button8_1" type= "button" value= "IE" onclick= "javascript:gotosubmit8_1 ()"/>
...
<script language= "JavaScript" >
function Gotosubmit8_1 () {
...
alert (window.event); Use window.event
...
}
</script>
Ie&firefox:
<input name= "button8_2" type= "button" value= "IE" onclick= "Javascript:gotosubmit8_2" (event)/>
...
<script language= "JavaScript" >
function Gotosubmit8_2 (evt) {
...
EVT=EVT?EVT: (Window.event?window.event:null);
alert (EVT); Use EVT
...
}
</script>
9.event.x and EVENT.Y problems
Note: Under IE, the even object has x,y attribute, but there is no pagex,pagey attribute; Firefox, the even object has pagex,pagey properties, but no x,y properties. Workaround: Use MX (mx = event.x? Event.x:event.pagex;) To replace IE under the Event.x or Firefox under the Event.pagex.
10.event.srcelement Problem
Note: Under IE, the even object has srcelement attribute, but there is no target attribute; Firefox, the even object has the target attribute, but there is no srcelement attribute. Workaround: Use obj (obj = event.srcelement? event.srcElement:event.target;) To replace IE under the Event.srcelement or Firefox under the Event.target.
11.window.location.href Problem
Description: Under IE or firefox2.0.x, you can use window.location or window.location.href; firefox1.5.x, you can only use window.location. Solution: Use window.location instead of window.location.href.
12. Modal and non modal window problems
Note: Under IE, modal and modeless windows can be opened by ShowModalDialog and showModelessDialog. Firefox can not. Workaround: Open a new window directly using the window.open (Pageurl,name,parameters) method.
If you need to pass parameters from a 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:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Accessing 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, Window.document.getElementById ("Frameid") can be used in IE and Firefox to access this frame object.
(2) Switch frame content: In IE and Firefox can be used Window.document.getElementById ("Testframe"). src = "xxx.html" or window.frameName.location = "xxx.html" to toggle the contents of the frame.
If you need to return the parameters in the frame to the parent window, you can use parent in frme to access the parent window. For example: parent.document.form1.filename.value= "aqing";
14. Find the problem
Take the following getelementbyclass as an example:
Document.getelementbyclass ("classname1"); This feature does not work in IE, you can use
Getelementsbyclassname substitution, but this function returns a match on the nodelist, not a single object, such as:
Copy Code code as follows:
var list, index;
List = Document.getelementsbyclassname ("classname1");
for (index = 0; index < list.length; ++index) {
List[index].setattribute (////*);
}
such as the problem, it is best to use the class library such as JQuery, Prototype, Google Closure, etc, these libraries are compatible with all browsers. This will save a lot of time to deal with these compatibility issues.
For instance, in JQuery:
$ (". Home1"). attr (/* ...);
15.body Problem
The body of Firefox exists before the body tag is fully read into the browser, and IE's body must be fully read by the browser before the body tag is present.
For example:
Firefox:
Copy Code code as follows:
<body >
<script type= "Text/javascript" >
Document.body.onclick = function (evt) {
EVT = EVT | | window.event;
alert (EVT);
}
</script>
</body>
Ie&firefox:
<body >
</body>
<script type= "Text/javascript" >
Document.body.onclick = function (evt) {
EVT = EVT | | window.event;
alert (EVT);
} </script>
Event Delegate Method
IE:document.body.onload = inject; Function inject () was implemented prior to this
Firefox:document.body.onload = inject ();
Some say the standard is:
Document.body.onload=new Function (' inject () ');
The difference between Firefox and the parent element of IE (parentelement)
IE:obj.parentElement Firefox:obj.parentNode
Workaround: 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
Workaround: Unify the use of pointer
18.innerText works well in IE, but innertext is not available in Firefox.
Workaround:
Copy Code code as follows:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). innertext = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}
Invalid statement in Firefox similar to obj.style.height = Imgobj.height
Workaround:
Obj.style.height = imgobj.height + ' px ';
Ie,firefox and other browsers for table label operations are different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, using the Appendchile method does not matter.
Workaround:
Copy Code code as follows:
Append a blank line to the table:
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);
padding Problem
padding 5px 4px 3px 1px Firefox can not be explained in shorthand,
Must be changed into padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
Elimination of UL, OL and other lists of indentation
Style should be written: list-style:none;margin:0px;padding:0px;
Where the margin property is effective for IE, the padding attribute is effective for Firefox
CSS Transparent
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
CSS rounded Corners
IE: Round 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;.
CSS double-line beveled 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
Conclusion:
such as the problem, it is best to use the class library such as JQuery, Prototype, Google Closure, etc, these libraries are compatible with all browsers. This will save a lot of time to deal with these compatibility issues.
