JavaScript (JS) and CSS are compatible with IE and Firefox (FF)

To be compatible with IE and FF,

JavaScript and CSS are compatible with IE and Firefox (FF) <br/> (Note: W3C stands for Firefox, chrome, Safari, opera, and FF stands for Firefox) <br/> current versions of firefox3.5, chrome3.0, safari4.0.3, and opera 9.64 <br/> (last modified on) <br/> CSS: <br/> 1. <br/> FF in the UL tag has a padding value, but there is no margin value. In ie, the opposite is true. <br/> solution: set UL's padding and margin to 0 (or not 0), for example, padding: 0; margin: 0; List-style: none; <br/> In addition, The form also has a margin value in IE by default, so it is best to set its margin and padding to 0 </P> <p> 2. <br/> in IE, cursor: hand can be set as a hand. W3C does not work. <br /> Solution: Use cursor: pointer </P> <p> 3. Center <br/> ie needs to set the parent window: Text-align: center; FF is margin-left: auto; margin-Right: auto; </P> <p> 4. there are differences between IE and FF box models, so special settings are required. <br/> the width of IE box is margin + width (Border and padding of IE are included in width) <br/> the FF box width is margin + width + border + padding <br/> FF: Yes! Important (priority resolution), ie is ignored, available! Important sets a special style for FF <br/> width: 600px! Important; // This should be placed in front of <br/> width: 598px; <br/> In addition, IE7 may be a strange support! The test in important and IE tester v0.4.2 is invalid. <br/> ie: offsetwidth = width; clientwidth = width-border <br/> FF: ofsetwidth = width + padding + border; clientwidth = width + padding; </P> <p> 5. <br/> in IE6, the margin in the DIV with float settings doubles. Solution: add the display: inline in the Div. </P> <p> 6. transparent filter: <br/> ie: filter: progid: DXImageTransform. microsoft. alpha (style = 0, opacity = 30); <br/> W3C: opacity: 0.3; <br/> or: <br/> ie: filter: alpha (opacity = 60); <br/> FF:-moz-ops: 0.6 ;/* Expired. Use the opacity above to replace */</P> <p> 7. disable selection <br/> non-FF: JS, onselectstart = "Return false;"; <br/> FF: CSS,-moz-user-select: none; </P> <p> 8: rounded corner: <br/> FF medium:-moz-border-radius: 5px; <br/> other support: -WebKit-border-radius: 5px;-khtml-border-radius: 5px; border-radius: 5px; </P> <p> JS: <br/> 1. <br/> innertext in IE is not in W3C and uses textcontent; <br/> eg: <br/> var OBJ = document. getelementbyid ("_ TD"); <br/> var text; <br/> If (obj. innertext) {<br /> Text = obj. innertext; <br/>} else if (obj. textcontent) {<br/> text = obj. textcontent; <br/>}< br/> (The DHTML manual says that innertext cannot be used on TR, TD, and other nodes, but I have used it before, then I used the method ie yesterday to test other people's pages and couldn't get the value. Which of the following I Want To Know? Under what circumstances cannot I use innertext? <br/> 2. <br/> in Ajax, the returned object state Ie can use readystate, but it must be readystate in W3C. Therefore, it is best to write all data as readystate. </P> <p> 3. obtain the keyboard return values in IE and W3C. W3C uses e. keycode and E. in addition, the keypress event is special. The test is as follows: <br/> ie: <br/> keypress: letter (65-90,97-12 2), digit (48-57), enter (13), ESC (27) does not support backspace (8), del (46), insert (45 ), move (35-40), F1-F12 (111-123) </P> <p> ff3.5: <br/> keypress: <br/> E. which: letter (65-90, 97-122), digit (48-57), enter (13), backspace (8) does not support ESC (27 ), f1-F12 (111-123), del (46), insert (45), move (35-40) <br/> E. keycode: ESC (27), F1-F12 (111-123), enter (13), backspace (8), del (46), insert (45), move (35-40) letter (65-90, 97-122), digit (48-57), </P> <p> chrome3.0: <B R/> keypress: <br/> E. which and E. keycode: letter (65-90, 97-122), digit (48-57), enter (13), does not support backspace (8), ESC (27 ), f1-F12 (111-123), del (46), insert (45), move (35-40) </P> <p> 4. add Remove event for object <br/> var OBJ = document. getelementbyid ("_ tname '); <br/> Add event: <br/> If (obj. attachevent) {<br/> obj. attachevent ("onchange", function () {// for IE <br/> otherfunction (Params); // you can pass parameters to the actual method here, you can also directly call other methods <br/>}); <br/>} else if (obj. addeventl Istener) {// for W3C <br/> obj. addeventlistener ("change", function () {<br/> otherfunction (Params); <br/>}, false); <br/>}< br/> remove event: <br/> obj. onclick = NULL; <br/> or <br/> If (obj. detachevent) {<br/> obj. detachevent ("onchange", test); <br/>} else if (obj. removeeventlistener) {<br/> obj. removeeventlistener ("change", test, false); <br/>}</P> <p> 5. <br/> Event Location <br/> General Purpose: <br/> screenx and screeny: coordinates of the mouse on the screen <br/> clientx, Clienty: coordinates of the visible area of the mouse on the page <br/> ie: <br/> E. x, E. Y and E. layerx is the same as E. offsetx only has the border gap), <br/> E. offsetx, E. offsety: the position of the mouse relative to the parent element (excluding the border, there is only a border gap between layerx and layerx with the position set to absolute or relative) <br/> W3C: <br/> E. pagex, E. pagey cursor position on the page <br/> E. layerx, E. compared to the "parent element of position" in the hierarchical relationship of the element that triggers the event, the layery mouse sets the position of the Boundary. layerx locates from the upper left corner of border, that is, if this parent element has a border, the coordinate origin is in the upper left corner of the border, instead of the content. Upper left corner of the area (if the position is not set to absolute or relative, this position indicates the distance relative to the leftmost part of the page) </P> <p> clienty + height of scrolling by the scroll bar = Pagey </P> <p> 6. input in IE. the Type attribute is read-only, but can be modified in FF </P> <p> 7. in IE, getelementsbyname (), (document. all [name] (not tested yet) cannot be used to obtain the DIV element (whether there are other elements that cannot be retrieved are unknown ). </P> <p> 8. trigger events using JS <br/> <SCRIPT type = "text/JavaScript"> <br/> function handertoclick () {<br/> var OBJ = document. getelementbyid ("btn1"); <br/> If (document. all) {// ie <br/> obj. fireevent ("onclick"); <br/>}else {// W3C <br/> var E = document. createevent ('mouseevent'); <br/> E. initevent ('click', false, false); <br/> obj. dispatchevent (E ); <br/>}</P> <p> </SCRIPT> <br/> <input type = "button" value = "btn1" id =" btn1 "Onclick =" alert ('button btn1 click event ') "/> <br/> <input type =" button "value =" triggers the onclick event with ID btn1 "onclick =" handertoclick () "/> </P> <p> 9. in ie, the event object has the srcelement attribute, and in W3C, the event object has the target attribute <br/> E = E | window. event; <br/> If (E = NULL) // when the event is null in IFRAME <br/> EIP too many topics top.doc ument. parentwindow. event; <br/> var OBJ = E. srcelement | e.tar get; </P> <p> in IE, onmouseover and onmouseout have attributes E. fromelement and E. toelement <br/> while W3C only uses one Attribute relatedtarget instead </P> <p> 10. attributes defined by W3C must be obtained by getattribute () </P> <p> 11. in ff3.0 +, Ajax asynchronous problem <br/> var isfirefox = navigator. useragent. indexof ("Firefox")>-1 <br/> xhr. onreadystatechange = handler; <br/> xhr. open ('get', encodeuri (Surl), basync); <br/> xhr. send (null); <br/> If (isfirefox) {<br/>/* xhr. onreadystatechange = */handler (); <br/>}</P> <p> 12. there is no insertadjacenthtml problem in ff (except ff) <br/> two solutions: <Br/> ① <br/> insertable: function () {// insertadjacenthtml <br/> If (document. body. insertadjacenthtml) {return ;}< br/> htmlelement. prototype. insertadjacenthtml = function (swhere, shtml) {<br/> var df = NULL, r = This. ownerdocument. createRange (); <br/> switch (string (swhere ). tolowercase () {<br/> case "beforebegin": <br/> r. setstartbefore (this); <br/> df = R. createcontextualfragment (shtml); <br/> This. parentnod E. insertbefore (DF, this); <br/> break; <br/> case "afterbegin": <br/> r. selectnodecontents (this); <br/> r. collapse (true); <br/> df = R. createcontextualfragment (shtml); <br/> This. insertbefore (DF, this. firstchild); <br/> break; <br/> case "beforeend": <br/> r. selectnodecontents (this); <br/> r. collapse (false); <br/> df = R. createcontextualfragment (shtml); <br/> This. appendchild (DF); <br/> break; <br/> case "after End ": <br/> r. setstartafter (this); <br/> df = R. createcontextualfragment (shtml); <br/> This. parentnode. insertbefore (DF, this. nextsibling); <br/> break; <br/>}< br/>}; <br/>}(), <br/> ② <br/> inserthtml: function (where, El, HTML) {<br/> where = where. tolowercase (); <br/> If (El. insertadjacenthtml) {<br/> switch (where) {<br/> case "beforebegin": <br/> el. insertadjacenthtml ('beforebegin', HTML); <br/> retur N el. previussibling; <br/> case "afterbegin": <br/> el. insertadjacenthtml ('afterbegin', HTML); <br/> return el. firstchild; <br/> case "beforeend": <br/> el. insertadjacenthtml ('beforeend', HTML); <br/> return el. lastchild; <br/> case "afterend": <br/> el. insertadjacenthtml ('afterend', HTML); <br/> return el. nextsibling; <br/>}< br/> throw 'illegal insertion point-> "'+ where +'" '; <br/>}< br/> Var range = el. ownerdocument. createRange (); <br/> var frag; <br/> switch (where) {<br/> case "beforebegin": <br/> range. setstartbefore (EL); <br/> frag = range. createcontextualfragment (HTML); <br/> el. parentnode. insertbefore (frag, El); <br/> return el. previussibling; <br/> case "afterbegin": <br/> If (El. firstchild) {<br/> range. setstartbefore (El. firstchild); <br/> frag = range. createcontextualfra Gment (HTML); <br/> el. insertbefore (frag, El. firstchild); <br/> return el. firstchild; <br/>}else {<br/> el. innerhtml = HTML; <br/> return el. firstchild; <br/>}< br/> case "beforeend": <br/> If (El. lastchild) {<br/> range. setstartafter (El. lastchild); <br/> frag = range. createcontextualfragment (HTML); <br/> el. appendchild (frag); <br/> return el. lastchild; <br/>}else {<br/> el. innerhtml = HTML; <br/> Return el. lastchild; <br/>}< br/> case "afterend": <br/> range. setstartafter (EL); <br/> frag = range. createcontextualfragment (HTML); <br/> el. parentnode. insertbefore (frag, El. nextsibling); <br/> return el. nextsibling; <br/>}< br/> throw 'illegal insertion point-> "'+ where + '"'; <br/>}</P> <p> 13. there is no outerhtml problem in ff (all except FF are supported): <br/> If (! Document. Body. outerhtml & typeof (htmlelement )! = "Undefined") <br/>{< br/> htmlelement. prototype. _ definegetter _ ("outerhtml", function () <br/>{< br/> var A = This. attributes, STR = "<" + this. tagname, I = 0; For (; I <. length; I ++) <br/> if (a [I]. specified) <br/> STR + = "" + A [I]. name + '= "' + A [I]. value + '"'; <br/> If (! This. canhavechildren) <br/> return STR + "/>"; <br/> return STR + ">" + this. innerhtml + "</" + this. tagname + ">"; <br/>}); <br/> htmlelement. prototype. _ definesetter _ ("outerhtml", function (s) <br/>{< br/> var r = This. ownerdocument. createRange (); <br/> r. setstartbefore (this); <br/> var df = R. createcontextualfragment (s); <br/> This. parentnode. replaceChild (DF, this); <br/> return s; <br/>}); <br/> htmlele Ment. Prototype. _ definegetter _ ("canhavechildren", function () <br/>{< br/> return! /^ (Area | base | basefont | Col | frame | HR | IMG | BR | input | isindex | link | meta | PARAM) $ /. test (this. tagname. tolowercase (); <br/>}); <br/>}< br/> or, if you only need a value, you can: <br/> function outerhtml (OBJ) {<br/> If (obj. outerhtml) <br/> return obj. outerhtml; <br/> else {<br/> var El = document. createelement ("Div"); <br/> el. appendchild (this. clonenode (true); <br/> return el. innerhtml; <br/>}< br/> 14. access the float and class of CSS: <br/> because float is a reserved word in Javascript, <br/> ie: obj. style. stylefloat = "Left"; <br/> W3C: obj.style.css float = "Left"; <br/> Similarly, when obtaining an object class (ie & FF: obj. classname;): <br/> ie: obj. getattribute ("classname"); <br/> W3C: obj. getattribute ("class"); </P> <p> 15. access the for Attribute of <label> <br/>. Similarly, for is reserved in javascript: <br/> ie: obj. getattribute ("htmlfor"); <br/> W3C: obj. getattribute ("for"); </P> <p> 16. style inherited by the access element: <br/> ie: obj. currentstyle. width; <br/> W3C: document. defaultview. getcomputedstyle (OBJ, null ). width; </P> <p> 17. obtain the visible area size of the webpage: <br/> FF: <br/> window. innerwidth; <br/> window. innerheight; <br/> ie & FF: <br/> var getclientrect = function () {<br/> var de; <br/> If (document. compatmode = "css1compat" includemo-document.doc umentelement; <br/> else de = document. body; <br/> return {width: de. clientwidth, height: de. clientheight };< br/>}< br/> alert (getclientrect (). width + "|" + getclientrect (). height); </P> <p> 18. node problems <br/> Use parentel in IE. the chilren () method obtains all child element nodes, which is not supported by W3C. <br/> Ie can use childel. parentelement is used to obtain the parent element, which is not supported by W3C. parentnode is used in all; </P> <p> IE and W3C: parentel. the childnodes attribute returns a set of all child nodes, including text nodes </P> <p> ie & W3C: parentel. children, attribute. All child elements (excluding text) are returned. </P> <p> the node in W3C does not have the removenode method. The following method must be used: node. parentnode. removechild (node) </P> <p> 12. <br/>