1. There is no outerHTML method in Outerhtml,ff compatible with Firefox.
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+ "</" +this.tagname.tolowercase () + ">";
});
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. Firefox, you can only use getattribute () to get the definition attribute.
Workaround: The unification is obtained from the defined attribute through GetAttribute ().
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, only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.
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 in IE, but not under Firefox, this is because Firefox event can only be used in the scene of the incident occurred.
Workaround:
Ie:
Copy Code code as follows:
<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:
Copy Code code as follows:
<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, even objects have pagex,pagey properties, but no x,y properties.
Workaround: Use mx (mx = event.x Event.x:event.pagex) to replace the event.x under IE or the Event.pagex under Firefox.
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 the event.srcelement under IE or the Event.target under Firefox.
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.
WORKAROUND: 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 is not.
WORKAROUND: Open the 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) Access to 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:
Window.document.getElementById ("Testframe") can be used in both IE and Firefox. 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.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:
Copy Code code as follows:
<body >
</body>
<script type= "Text/javascript" >
Document.body.onclick = function (evt) {
EVT = EVT | | window.event;
alert (EVT);
} </script>
15. 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";
}
the statements in Firefox that resemble obj.style.height = Imgobj.height are not valid
Workaround:
Obj.style.height = imgobj.height + ' px ';
Ie,firefox and other browsers have different actions for table labels, the innerHTML Assignment of table and TR is not allowed in IE, and the Appendchile method is not used when adding a tr using JS.
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 question
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;
22. 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;
There are also some related IE and Firefox compatible
A collection of incompatible solutions for IE and Firefox
