Browser Compatibility FAQ Introduction (Ff,ie,chrome) Summary

All of a sudden, the layout that looks neat under chrome becomes a mess under IE. To find out why, I changed the div's Background-color attribute. Finally, the width of the same div is found to be different under IE and chrome. This is a big night, it's really creepy!
After that, I did a test. When:

CSS Code

The code is as follows	Copy Code
Div1 { width:960px; margin:0px; padding:0px; }

At this time, in two browsers is no difference! The total width is 960px.
However, when:

CSS Code

The code is as follows	Copy Code
Div1 { width:960px; margin:0px; padding:0px 10px 0px 10px; }

At this point, Chrome will quit. She actually put the padding 20px on the outside, so that the total width of div1 is 960px+10px+10px=980px, and in IE, div1 width is still 960px;
According to my thinking, I feel padding should be counted in the width of the drop, did not expect chrome so stubborn.
After testing, border and padding, margin values are counted in the "width" of the outside.

Also, in the absence of a float, chrome will take div1 as a position:absolute, and IE will treat it as poisttion:relative; So, as far as possible, this is a block-level element of float left!

1. Centering problem
Div in the content, ie defaults to center, and FF defaults to left-aligned
You can try adding code Margin:auto

2. Height problem
Two or nested div, above the div set height, if the actual content of the div is greater than the set height, there will be two div overlapping in FF phenomenon; but in IE, the following Div will automatically give space to the above Div
So in order to avoid overlapping layer, height must be controlled properly, or simply do not write height, so that he automatically adjust, the better method is height:100%;
But when this div inside level elements are float, you need to at the end of the Div block, closed and before adding a bottom of the empty Div, the corresponding CSS is:
. float_bottom {Clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden}

3. Clear:both;
Do not want to be float float, just write clear:both in Div;

4. The double distance produced by IE floating margin

The code is as follows	Copy Code
#box { Float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce a distance of 200px Display:inline; Make floating Ignore }

5. Padding question
FF sets padding, div increases height and width, but IE does not (* Standard XHTML1.0 definition DTD seems consistent)
Highly controlled, or try to use height:100%;
Width reduction using padding
However, according to practical experience, the general FF and IE padding will not be much different, the actual div width = width + padding, so div write full width and padding,width with the actual desired width minus padding definition

6. Padding and marign problems on y-axis when Div is nested
The distance of the y-axis div to the parent div in FF is the parent padding + sub Marign
ie in the y-axis of the child div to the parent div distance of the father padding and son marign in the big One
FF in the y-axis when the parent padding=0 and border=0, the child div to the parent div distance of 0, the child Marign action to the parent div outside

7. Padding,marign,height,width's Fool-solving skills
Attention is skill, not method:
Write the standard head.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
High as far as possible with padding, careful with margin,height as far as possible to make up 100%, the parent height has a fixed value of the child height not 100%, the child is all floating when the bottom fill an empty clear:both div
Width as far as possible with margin, careful to use padding,width calculate the actual to subtract padding

List class

1. The UL label in FF has the padding value in the default, but in IE only margin has the value
First define UL {margin:0;padding:0;}

2. UL and ol list indent problem
Elimination of UL, OL and other lists of indentation, style should be written: {list-style:none;margin:0px;padding:0px;}

Show class

1. Display:block,inline two elements
Display:block; Can simulate an inline element as a block element
Display:inline; The effect of implementing the same row arrangement
display:table; For FF, simulating the effect of a table
Display:block block element, the element is characterized by:
Always start on a new line;
Height, row height and top and bottom margins are controllable;
The width defaults to 100% of its container, unless a width is set
<div>,<p>,Display:inline is to display elements as inline elements, and the elements are characterized by:
and other elements are on one line;
High, the row height and the top and the bottom distance cannot be changed;
The width is the width of its text or picture, and cannot be changed.
<span>,<a>,<label>,<input>,,<strong> and <em> are examples of inline elements

2. Mouse finger-like display
All use the standard writing cursor:pointer;

background, picture class

1. Background display problem
All attention to the Width,height property

2. Background transparency issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60);
IE:filter:alpha (opacity=10);
ff:opacity:0.6;
FF:-moz-opacity:0.10;
It's best to write all two, and put the opacity attribute below

JavaScript part

1. Document.form.item question
Problem:
A statement such as Document.formName.item ("ItemName") exists in the code and cannot be run under FF
Workaround:
Switch to document.formname.elements["ElementName"]

2. Collection Class object problem
Problem:
Many collection class objects in the code use (), IE can accept, FF can not
Workaround:
Instead, use [] as the subscript operation, for example:
Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]

3. window.event
Problem:
Unable to run on FF using window.event
Workaround:
The event in FF can only be used on the spot where the incident occurred, and this issue cannot be resolved temporarily. The event can be uploaded to the function to work around it:
OnMouseMove = "functionname (event)"
function functionname (e) {
E = e | | window.event;
......
}

4. The ID of an HTML object as an object name problem
Problem:
In IE, the ID of an HTML object can be used directly as the subordinate object variable name of document, and in FF it cannot be
Workaround:
Use object variables all with standard getElementById ("Idname")

5. Obtaining an object with a idname string
Problem:
In IE, you can use eval ("Idname") to get an HTML object with an ID of idname, which in FF cannot be
Workaround:
Replace eval ("Idname") with getElementById ("Idname")

6. Variable name and an HTML object ID the same problem
Problem:
In FF, because the object ID is not the name of an HTML object, you can use the same variable name as the HTML object ID, ie cannot
Workaround:
In the declaration of variables, all add var to avoid ambiguity, so that in IE also normal operation
It is best not to take variable names that are the same as HTML object IDs to reduce errors

7. Event.x and EVENT.Y issues
Problem:
In IE, the event object has a X,y attribute, and there is nothing in FF
Workaround:
In FF, the equivalent to Event.x is Event.pagex, but Event.pagex ie does not
Therefore, the use of event.clientx instead of event.x, in IE also has this variable
The subtle difference between Event.clientx and Event.pagex is the scroll bar.
To be exactly the same, you can do this:
MX = Event.x? Event.x:event.pagex;
And then use MX instead of event.x.

8. About Frame
Problem:
In IE, you can use Window.testframe to get the frame,ff.
Workaround:
Window.top.document.getElementById ("Testframe"). src = ' xx.htm '
window.top.frameName.location = ' xx.htm '

9. Get the attributes of the element
In FF, the attribute that you define must be getattribute () to obtain

10. No parentelement,parement.children in FF with Parentnode,parentnode.childnodes
Problem:
ChildNodes the meaning of the subscript is different in IE and FF, the childnodes of FF inserts a blank text node
Workaround:
You can avoid this problem by Node.getelementsbytagname ().
Problem:
When the nodes in HTML are missing, IE and FF have different explanations for parentnode, for example:
<form>
<table>
<input/>
</table>
</form>
The value of Input.parentnode in FF is form, and the value of Input.parentnode in IE is an empty node
Problem:
The node in FF itself has no Removenode method
Workaround:
You must use the following method Node.parentNode.removeChild (node)

Because the Chrome,safari,opara browser does not support automatic "set as Home" & "Add Favorites".  So we can only try, catch a moment, give a wrong hint! It's perfect.
In other IE, many people have also encountered it window.external.addFavorite.  will be the problem of error. So I have to throw out the message.

Add to Favorites:

JS Code

/tr>

The code is as follows

Copy Code

function Addfavorite () {      if (document.all) {           try{              Window.external.addFavorite (window.location.href,document.title);          }catch (e) {              alert (" Failed to join the collection, please use Ctrl+d to add ");         }        }else if (window.sidebar) {          Window.sidebar.addPanel ( Document.title, Window.location.href, "");      }else{           alert ("Join collection failed, please add with Ctrl+d");     }  }

Set as homepage:

JS Code

The code is as follows

Copy Code

function setHomePage () { if (document.all) { Document.body.style.behavior= ' url (#default #homepage) '; Document.body.setHomePage (WINDOW.LOCATION.HREF); }else if (Window.sidebar) { if (Window.netscape) { try{ Netscape.security.PrivilegeManager.enablePrivilege ("Universalxpconnect"); }catch (e) { Alert ("This action is rejected by the browser, and if you want to enable this feature, Please enter about:config in the Address bar and then signed.applets.codebase_principal_support the value to true "); } } var prefs = components.classes[' @mozilla. Org/preferences-service;1 '].getservice (components. Interfaces.nsiprefbranch); Prefs.setcharpref (' Browser.startup.homepage ', window.location.href); }else{ Alert (' Your browser does not support automatic automatic setting of the home page, Please use the browser menu to manually set! '); } }

XML compatible

function has--
Xml_loadfile:xml synchronous/Asynchronous loading.
xml_transformnode:xsl conversion.
Xml_text: The text of the node.
selectSingleNode: Select a single node based on XPath.
SelectNodes: Select multiple nodes based on XPath.
All code (zyllibjs_xml.js)--

The code is as follows

Copy Code

/* Zyllibjs_xml XML processing @author zyl910 Note-- 1. Chrome cannot read local files because of its security restrictions. Reference ~~~~~~~~~ http://www.jinlie.net/?p=302 Chrome browser Loads XML document Update ~~~~~~ [2011-11-02] Defined. [2011-11-09] Xml_loadfile: Adds a iserror parameter to the callback function. [2011-11-21] selectSingleNode SelectNodes */ Load XML file and return XML document node Return: Returns an object when successful (returns an XML Document object in synchronous mode, returns an Action object in asynchronous mode), and returns NULL when failed. The URL of the Xmlurl:xml file. Funcasync: callback function. function onload (xmldoc, IsError) {...} function Xml_loadfile (XMLURL, Funcasync) { var xmldoc = null; var ischrome = false; var asyncis = (Null!=funcasync); Whether it is loaded asynchronously. When Funcasync is not empty, asynchronous loading is used, otherwise it is loaded synchronously. Check parameters if ("" ==xmlurl) return null; if (ASYNCIS) { if ("function"!=typeof (funcasync)) return null; } Creating XML objects Try { xmldoc = new ActiveXObject ("Microsoft.XMLDOM"); Support IE } catch (ex) { } if (Null==xmldoc) { Try { Support Firefox, Mozilla, Opera, etc xmldoc = Document.implementation.createDocument ("", "", null); Creates an empty XML Document object. } catch (ex) { } } if (Null==xmldoc) return null; Load XML document Xmldoc.async = Asyncis; if (ASYNCIS) { if (window. ActiveXObject) { Xmldoc.onreadystatechange = function () { if (xmldoc.readystate = 4) { var isError = false; if (null!=xmldoc.parseerror) { IsError = (0!=xmldoc.parseerror.errorcode); 0 success, not 0 failure. } Funcasync (xmldoc, isError); } } } Else { Xmldoc.onload = function () { Funcasync (xmldoc, false); } } } Try { Xmldoc.load (XMLURL); } catch (ex) { Alert (ex.message)//If the browser is chrome, it will catch this exception: Object # (a Document) has no method "load" Ischrome = true; xmldoc = null; } if (ischrome) { var xhr = new XMLHttpRequest (); if (ASYNCIS)//asynchronous { Xhr.onreadystatechange = function () { if (xhr.readystate = 4) { Funcasync (Xhr.responsexml, Xhr.status!= 200); } } Xhr.open ("Get", XMLURL, True); In try///asynchronous mode, the callback function handles the error. { Xhr.send (NULL); } catch (ex) { Funcasync (null, TRUE); return null; } return XHR; Note: The return is XMLHttpRequest. It is recommended that you return values only with NULL tests in asynchronous mode. } else//Sync { Xhr.open ("Get", XmlUrl, false); Xhr.send (NULL); In synchronous mode, an exception is handled by the caller xmldoc = Xhr.responsexml; } } return xmldoc; } Use XSLT to convert an XML document to a string. function Xml_transformnode (xmldoc, Xsldoc) { if (Null==xmldoc) return ""; if (Null==xsldoc) return ""; if (window. ActiveXObject)//IE { Return Xmldoc.transformnode (Xsldoc); } else//FireFox, Chrome { Defining Xsltprocesor Objects var xsltprocessor=new xsltprocessor (); Xsltprocessor.importstylesheet (Xsldoc); Transformtodocument Way var result=xsltprocessor.transformtodocument (xmldoc); var xmls=new XMLSerializer (); var RT = Xmls.serializetostring (Result); return RT; } } Get the text of a node function Xml_text (XmlNode) { if (Null==xmlnode) return ""; var RT; if (window. ActiveXObject)//IE { RT = Xmlnode.text; } Else { FireFox, Chrome, ... RT = Xmlnode.textcontent; } if (NULL==RT) Rt=xmlnode.nodevalue; XML DOM return RT; } Add a method. To be compatible with Firefox, Chrome. if (!window. ActiveXObject) { XMLDocument.prototype.selectSingleNode = Element.prototype.selectSingleNode = function (XPath) { var x = this.selectnodes (XPath) if (! x | | X.length < 1) return null; return x[0]; } XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = function (XPath) { var xpe = new Xpathevaluator (); var nsresolver = xpe.creatensresolver (this.ownerdocument = = Null?this.documentelement: This.ownerDocument.documentElement); var result = Xpe.evaluate (XPath, this, nsresolver, 0, NULL); var found = []; var res; while (res = Result.iteratenext ()) Found.push (RES); return found; } } Chrome browser Loads XML document The load method is not supported by Chrome browsers to load XML documents. Look up the Internet, you need to solve the following function Loadxmldoc (xml_name) { var xmldoc; Try { xmldoc = new ActiveXObject ("Microsoft.XMLDOM"); Support IE ｝ catch (E) { Try { Support Firefox, Mozilla, Opera, etc xmldoc = Document.implementation.createDocument ("", "", null);//Create an empty XML Document object. } catch (E) { alert (e.message); } } Load XML document Try { Xmldoc.async = false; Turn off asynchronous loading Xmldoc.load (Xml_name); } catch (E) { Alert (e.message) if the browser is chrome, it will catch this exception: Object # (a Document) has no method "load", so the following implementation supports the chrome loading of XML documents (just a cursory write down) var xhr = new XMLHttpRequest (); Xhr.open ("Get", Xml_name, false); Xhr.send (NULL); xmldoc = xhr.responseXML.documentElement; } return xmldoc; } BTW, each browser loads an XML string differently. IE uses the Loadxml () method to parse XML strings: The code is as follows: Xmldoc.loadxml (XML_STR); Firefox, and so on using the Domparser object to parse XML strings: The   code is as follows: var parsexml = new Domparser ();