Firefox (Firefox) and IE Chrome browser compatible javascript and CSS notation

Css:
1.
The UL tag in FF has a padding value, but there is no margin value, and in IE is the opposite
Solution: The UL padding and margin are set to 0 (also can not 0) such as: Padding:0;margin:0;list-style:none;
Another form default in IE will also have margin value, so it is best to set its margin and padding to 0

2.
In IE, Cursor:hand can set the mouse to hand shape, FF not,
Solution: All with Cursor:pointer

3, center problem
IE needs to be the parent window: Text-align:center, while FF is Margin-left:auto;margin-right:auto;

4.IE and FF box models are different, so special settings are required
The total width of IE box is: width+padding+border+margin width sum
The total width of the FF box is width, and the width of the padding+border+margin is not included in the widths.
FF: Support!important (priority resolution), IE ignored, available!important for FF special style
width:600px!important;//this to the front.
width:598px;
In addition: Legend IE7 will be strange support!important, tried but not;

5.
IE6 in the set float in the div margin will double, the solution: div inside plus display:inline;

6. Transparent filter:
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=30);
ff:opacity:0.3;
Or:
IE:filter:alpha (opacity=60);
ff:-moz-opacity:0.6;/* is obsolete, with the above opacity instead of * *

7. Disable Selection
IE: Use js,onselectstart= "return false;";
FF: Using Css,-moz-user-select:none;

8: Rounded Corners:
FF:-moz-border-radius:4px;

Js:
1.
IE innertext in FF, using Textcontent;
eg
var Obj=document.getelementbyid ("_td");
var text;
if (Obj.innertext) {
Text=obj.innertext;
else if (obj.textcontent) {
Text=obj.textcontent;
}
(DHTML Manual said innertext can not be used in TR,TD and other nodes, but I have used before, and then yesterday in the test of other people's page with the above method ie can't get the value, who knows the hope to inform, under what circumstances can not use the innertext)
2.
Return object state in Ajax IE can use readystate but must be readystate in FF, so it is best to write readystate

3. Get the keyboard return value in IE and FF, <input type= "text"  onkeyup= "Test (event)"/>
Function test (e)  {
Var keyc=getkeycode (e);
Alert (KEYC);
}
Function getkeycode (e)  {//obtains keyboard event values in different browsers
VAR&NBSP;KEYC
if (window.event)  {// IE keyboard event
Keyc=e.keycode;
}  else if  (E.which)  {//Firefox
Keyc=e.which;
}
return keyc;
}

4. Add a removal event for an object
var Obj=document.getelementbyid ("_tname ');
To add an event:
if (obj.attachevent) {
Obj.attachevent ("onchange", function () {
Otherfunction (params);//Here you can give the method arguments, or you can call other methods directly.
});
else if (Obj.addeventlistener) {
Obj.addeventlistener ("Change", function () {
Otherfunction (params);
},false);
}
To remove an event:
Obj.onclick=null;
* The following code why not, IE output obj.onclick unexpectedly for Anonymous, hope the master can help solve
if (obj.detachevent) {
Obj.detachevent ("onchange", test);
else if (Obj.removeeventlistener) {
Obj.removeeventlistener ("Change", Test,false);
}*/

5.
Event.x and Event.y in IE
Only event.pagex,event.pagey in ff.
All have Event.clientx and Event.clienty properties.
Solution:
var x=e.x?e.x:e.pagex;//e parameters that are passed in for the event object

The Input.type property under 6.IE is read-only, but MF can modify

7. In IE, Getelementsbyname (), (Document.all[name) (not successfully tested) can not be used to obtain DIV elements (whether there are other elements that cannot be taken is unknown).

8. Through JS to trigger events
<script type= "Text/javascript" >
function Handertoclick () {
var Obj=document.getelementbyid ("Btn1″");
if (document.all) {//ie
Obj.fireevent ("onclick");
} else {
var e=document.createevent (' MouseEvent ');
E.initevent (' click ', False,false);
Obj.dispatchevent (e);
}
}

</script>
<input type= "button" value= "btn1″id=" btn1″onclick= "alert (' button btn1 Click event ')"/>
<input type= "button" value= "triggers the onclick event with BTN1 id" onclick= "handertoclick ()"/>

9.IE Event object has srcelement attribute, Firefox, event object has target attribute
E = e| | window.event;
if (e==null)//When event is empty in IFRAME
E=window.top.document.parentwindow.event;
var Obj=e.srcelement | | E.target;

10. Attributes defined in FF must be getattribute ()

11. In FF, Ajax cannot be invoked synchronously, only using asynchronous methods
Xhttp.open ("Get", Url,basync | | | navigator.appname== "Netscape");////When the FF is only returned asynchronously

No insertadjacenthtml problem under 12.FF
Two solutions, if you can only use the latter in an IFRAME:
①
Iahtml:function () {//insertadjacenthtml by Bluedestiny ^_^
if (Document.body.insertAdjacentHTML) {return;}
HTMLElement.prototype.insertAdjacentHTML = function (Swhere, SHTML) {
var df = Null,r = This.ownerDocument.createRange ();
Switch (String (swhere). toLowerCase ()) {
Case "Beforebegin":
R.setstartbefore (this);
DF = r.createcontextualfragment (SHTML);
This.parentNode.insertBefore (DF, this);
Break
Case "Afterbegin":
R.selectnodecontents (this);
R.collapse (TRUE);
DF = r.createcontextualfragment (SHTML);
This.insertbefore (DF, this.firstchild);
Break
Case "BeforeEnd":
R.selectnodecontents (this);
R.collapse (FALSE);
DF = r.createcontextualfragment (SHTML);
This.appendchild (DF);
Break
Case "Afterend":
R.setstartafter (this);
DF = r.createcontextualfragment (SHTML);
This.parentNode.insertBefore (DF, this.nextsibling);
Break
}
};
}(),
Ii
Inserthtml:function (where, El, HTML) {
where = Where.tolowercase ();
if (el.insertadjacenthtml) {
Switch (where) {
Case "Beforebegin":
el.insertadjacenthtml (' Beforebegin ', HTML);
return el.previoussibling;
Case "Afterbegin":
el.insertadjacenthtml (' Afterbegin ', HTML);
return el.firstchild;
Case "BeforeEnd":
el.insertadjacenthtml (' BeforeEnd ', HTML);
return el.lastchild;
Case "Afterend":
el.insertadjacenthtml (' afterend ', HTML);
return el.nextsibling;
}
Throw ' illegal insertion point-> ' + where + ' ';
}
var range = El.ownerDocument.createRange ();
var Frag;
Switch (where) {
Case "Beforebegin":
Range.setstartbefore (EL);
Frag = range.createcontextualfragment (HTML);
El.parentNode.insertBefore (Frag, EL);
return el.previoussibling;
Case "Afterbegin":
if (el.firstchild) {
Range.setstartbefore (El.firstchild);
Frag = range.createcontextualfragment (HTML);
El.insertbefore (Frag, el.firstchild);
return el.firstchild;
}else{
el.innerhtml = html;
return el.firstchild;
}
Case "BeforeEnd":
if (el.lastchild) {
Range.setstartafter (El.lastchild);
Frag = range.createcontextualfragment (HTML);
El.appendchild (Frag);
return el.lastchild;
}else{
el.innerhtml = html;
return el.lastchild;
}
Case "Afterend":
Range.setstartafter (EL);
Frag = range.createcontextualfragment (HTML);
El.parentNode.insertBefore (Frag, el.nextsibling);
return el.nextsibling;
}
Throw ' illegal insertion point-> ' + where + ' ';
}

There is no outerhtml problem under 13.FF:
if (typeof (HtmlElement)!= "undefined" &&!window.opera)
{
htmlelement.prototype.__definegetter__ ("outerHTML", function ()
{
var a=this.attributes, str= "<" +this.tagname, i=0;for (; i<a.length;i++)
if (a[i].specified)
str+= "" +a[i].name+ ' = "' +a[i].value+ '";
if (!this.canhavechildren)
return str+ "/>";
return str+ ">" +this.innerhtml+ "</" +this.tagname+ ">";
});
htmlelement.prototype.__definesetter__ ("outerHTML", function (s)
{
var r = This.ownerDocument.createRange ();
R.setstartbefore (this);
var df = r.createcontextualfragment (s);
This.parentNode.replaceChild (DF, this);
return s;
});
htmlelement.prototype.__definegetter__ ("Canhavechildren", function ()
{
Return!/^ (Area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param) $/.test ( This.tagName.toLowerCase ());
});
}

14. Accessing the float and class of CSS:
Since float is a reserved word in JavaScript,
Ie:obj.style.stylefloat= "left";
Ff:obj.style.cssfloat= "left";
Similarly get the object's Class (ie&ff:obj.classname;):
IE:obj.getAttribute ("ClassName");
FF:obj.getAttribute ("class");

15. Access <label> for properties
Similarly, for a reserved word in javascript:
IE:obj.getAttribute ("htmlfor");
FF:obj.getAttribute ("for");

16. Access the style of the element inheritance:
IE:obj.currentStyle.width;
FF:document.defaultView.getComputedStyle (obj,null). width;

17. Get the page visible area size:
FF (contains the width and height of the scroll bar):
Window.innerwidth;
Window.innerheight;
IE&FF (does not include scroll bars):
Document.body.clientWidth;
Document.body.clientHeight;

11. Node problem
Parentelement Parement.children is used in IE, and parentnode is used in FF Parentnode.childnodes

ChildNodes the meaning of the subscript is different in IE and FF, FF uses the DOM specification, and a blank text node is inserted in ChildNodes.

There is no Removenode method for nodes in FF, you must use the following method Node.parentNode.removeChild (node)

12.

Firefox browser good support for the standard, is currently the best CSS support browser, and IE is relatively early, in the context of the support of the consortium has not been very good, so the two browsers in many ways different.
Here's a summary of compatibility issues with both browsers:
1. 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.

2.HTML Object Acquisition Problem
Firefox:javascript Code
document.getElementById ("Idname");

document.getElementById ("Idname");
JavaScript code
Ie:document.idname

Ie:document.idname or JavaScript code
document.getElementById ("Idname");

document.getElementById ("Idname");
Workaround: Use JavaScript code in a unified way
document.getElementById ("Idname");

document.getElementById ("Idname");

3.const problem
Description: Firefox, you can use the Const keyword or the var keyword to define constants;
In IE, constants can only be defined using the var keyword.
Workaround: Use the var keyword uniformly to define constants.

4.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. Firefox must add an event as a parameter pass from the source. IE ignores this parameter and uses window.event to read the event.
Workaround:
Ie&firefox:
Submitted (event) "/> ...
<script language= "JavaScript" >
Function submitted (EVT) {
EVT=EVT?EVT: (Window.event?window.event:null);
}
</script>

5.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.

6.event.srcelement problem
Note: Under IE, the event 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. Please also note the event compatibility issue.

7.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.

8. 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";

9.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. Frameid and FrameName can have the same name.
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 pass parameters in a frame back to the parent window (note that it is not opener, but parent frame), you can use parent in the frame to access the parent window. For example: parent.document.form1.filename.value= "aqing";

10.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.

11. Event Delegate Method
IE:document.body.onload = inject; Function inject () was implemented prior to this
Firefox:document.body.onload = inject ();

The difference between Firefox and IE's parent element (parentelement)
IE:obj.parentElement
Firefox:obj.parentNode
Workaround: Because both Firefox and IE support DOM, using Obj.parentnode is a good choice.

13.cursor:hand VS Cursor:pointer
Firefox does not support hand, but IE supports pointer
Workaround: Unify the use of pointer

14.innerText works well in IE, but innertext is not available in Firefox. Requires textcontent.
Workaround:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). innertext = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}

When you set the HTML tag style in Firefox, all positional and font dimensions must be followed by PX. This IE is also supported.

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 AppendChild method is not used when adding a tr using JS.
Workaround:
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;

18. 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;

22. Options collection Operations on select
Enumeration elements can be SelectName.options.item () in addition to [], and SelectName.options.length, Selectname.options.add/remove can be used on both browsers. Notice that the value element is assigned after add, otherwise it will fail.

The difference between XMLHTTP
Mf
if (window. XMLHttpRequest)//MF
{
Xmlhttp=new XMLHttpRequest ()
Xmlhttp.onreadystatechange=xmlhttpchange
Xmlhttp.open ("Get", url,true)
Xmlhttp.send (NULL)
}
Ie
else if (window. ActiveXObject)//code for IE
{
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")
if (XMLHTTP)
{
Xmlhttp.onreadystatechange=xmlhttpchange
Xmlhttp.open ("Get", url,true)
Xmlhttp.send ()
}
}
}

Width and padding in 24.css
Width widths in IE7 and FF do not include padding, including padding in Ie6.

25.css hack
Depending on how well the CSS styles are supported by different browsers, the analytic results and the priority of the CSS are different, and designers can write different CSS style codes based on the characteristics of these different browsers. IE6 can recognize the underscore _ and the asterisk *,ie7 can recognize the asterisk *, do not recognize the underscore _, and Firefox two are not recognized, so you can target the IE6.IE7 and FF through the use of these special symbols to write different code.

<style>
div{
Background:green; * For FireFox/*
*background:red; /* for IE7 * *
_background:blue; /* for IE6 * *
}
</style>

The style displays the background color green in Firefox, red in IE7, and blue in the IE6 background color.

In addition,!important declarations can also be a good way to elevate the application precedence of the specified style rule. !important declarations in IE6 and FF can improve precedence, but!important declarations in IE6 are replaced by later-named property definitions. Therefore, the combination of the * and the!important declaration can also solve the compatibility problem between IE6,IE7 and FF.

Distinguish ff,ie7,ie6:background:red; *background:green!important; *background:blue;

Note: IE can identify *; FF does not recognize *;IE6 can recognize *, but can not identify!important;ie7 can identify *, but also to identify!important; FF does not recognize *, but can identify!important;

For Ie7/firefox, add [xmlns] to the front of the CSS, such as the Left property below, if I want to work only on Ie7/firefox, the following:
[xmlns] #left {
Float:left;
BORDER:4PX solid #999;
padding:5px;
width:200px;
height:200px;
}
Works only for IE6, you can add * HTML to the front of CSS, such as:
* HTML #left {
Clear:both;
}

Works only for IE7, in the CSS front plus *+html, such as:
*+html #left {
Clear:both;
}

Written in the order of Firefox is written in the front, IE7 in the middle, IE6 written in the last side.

26. Use IE-specific conditional annotation

<!– Other Browsers –>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>

<!–[if IE 7]>
<!– Suitable for ie7–>
<link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/>
<! [endif]–>

<!–[if LTE IE 6]>
<!– suitable for IE6 and –>
<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>
<! [endif]–>

27.div Vertical Center problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines

28.cursor:pointer can display cursor finger-like in IE FF at the same time, hand only IE can

29.FF: Links with border and background color, you need to set the Display:block, and set the Float:left guarantee do not change lines. Refer to MenuBar, to set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.

30. In Mozilla Firefox and IE, the box model explains inconsistencies resulting in a difference of 2PX resolution: div{margin:30px!important;margin:28px}
Note that the order of these two margin must not be written in reverse, according to the Czech Republic!important This attribute IE is not recognized, but other browsers can identify. So in the case of IE, the explanation is as follows: div{maring:30px;margin:28px}
Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important;

31.ie5  and IE6 box interpretations are inconsistent
IE5 under div{width:300px;margin:0 10px 0 10px;} The width of the
div  is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is  300px+10px (right padding) +10px (left padding) = 320px to calculate. Then we can do the following modify  div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}