First, differences in functions and methods
1. GetYear () method
【Note】 a look of the following code:
var year = new Date (). getYear (); document.write (year);
In IE to get a date "2010" in Firefox to see the date is "110", mainly because of Firefox which getYear returns the "current year -1900" value.
Combined with years of judging, such as:
var year = new Date (). getYear (); year = (year <1900? (1900 + year): year); document.write (year);
You can also getFullYear getUTCFullYear to call:
var year = new Date (). getFullYear (); document.write (year);
2.window.event problem description: window.event can only run in IE, but can not run in Firefox, because Firefox's event can only be used in the scene of the incident. Firefox must be from the source by adding event parameters . Ie ignore the parameters, using window.event to read the event.
IE & Firefox:
Submitted (event) "/> ...
function Submitted (evt) (
evt = evt? evt: (window.event? window.event: null);
3. Custom attribute description of the problem: IE, you can use to obtain general properties of the method to obtain custom attributes, you can use the getAttribute () for custom properties; Firefox, it can only use the getAttribute () for custom attributes.
Solution: unified by getAttribute () for custom attributes.
【Description】 analysis see the following code:
echo = function (str) (document.write (str);)
This function is normal in the run IE, Firefox under which this error was.
【Treatment】 compatible with var in echo to normal before, and this is our aim that var.
5.event.x and event.y description of the problem: IE next, even objects with x, y properties, but no pageX, pageY property; Firefox under, even objects have pageX, pageY property, but there is no x, y properties.
Solution: Use mX (mX = event.x? Event.x: event.pageX;) instead of IE or Firefox under event.x under event.pageX.
6.event.srcElement description of the problem: IE Next, event object has srcElement property, but there is no target attribute; Firefox under, even objects with target attributes, but no srcElement property.
Solution: use obj (obj = event.srcElement? Event.srcElement: event.target;) instead of IE or Firefox under event.srcElement under the event.target. Please also note event of compatibility issues.
7.window.location.href description of the problem: IE or Firefox2.0.x, you can use window.location or window.location.href; Firefox1.5.x, the only use window.location.
Solution: use window.location instead of window.location.href.
8.body question Firefox's body in the body tag has not been completely read into the browser existed before; while IE's body in the body tag must be completely read into the browser only after there.
9. The event delegate method IE: document.body.onload = inject; / / Function inject () has been achieved before in the Firefox: document.body.onload = inject ();
10. Firefox and IE's parent element (parentElement) the difference between IE: obj.parentElement
firefox: obj.parentNode solution: for firefox and IE support the DOM, so use obj.parentNode is a good choice. 17.cursor: hand VS cursor: pointer firefox does not support the hand, but it ie to support pointer solutions: unified use of pointer
11.innerText in IE to work normally, but in FireFox the innerText does not. Xuyong textContent. Solution: if (navigator.appName.indexOf ("Explorer")> -1) (document.getElementById ('element'). InnerText = "my text";) else (document.getElementById ('element'). TextContent = "my text";) 19. FireFox HTML tags for style setting, all the position and font size of the value must be followed by px. The ie is also supported.
12. Ie, firefox and other browser tab for table operations are different, ie not allowed in the table and tr the innerHTML of the assignment, use js to add a tr, the using the appendChild method will not work. Solution: / / append a blank line to the table:
var row = otable.insertRow (-1);
var cell = document.createElement ("td");
cell.innerHTML = "";
cell.className = "XXXX";
Second, access and set the style
1. CSS's "float" property
In IE, like this:
document.getElementById ("header"). style.styleFloat = "left";
In Firefox, like this:
document.getElementById ("header"). style.cssFloat = "left";
【Treatment】 compatible one before the judge in writing to determine whether the browser is IE:
if (document.all) (document.getElementById ("header"). style.styleFloat = "left";) else (document.getElementById ("header"). style.cssFloat = "left";)
2. Access <label> tab "for"
【Description】 analysis and "float" property, same as the syntax is not required to access the distinction <label> tab "for".
In IE, like this:
var myObject = document.getElementById ("myLabel"); var myAttribute = myObject.getAttribute ("htmlFor");
In Firefox, like this:
var myObject = document.getElementById ("myLabel"); var myAttribute = myObject.getAttribute ("for");
【Treatment】 compatible solution is also the first to check browser type.
3. Access and set the class attribute
IE8.0 all IE versions prior written:
var myObject = document.getElementById ("header"); var myAttribute = myObject.getAttribute ("className");
Applicable to IE8.0 and firefox wording:
var myObject = document.getElementById ("header"); var myAttribute = myObject.getAttribute ("class");
In addition, use setAttribute () set the Class attribute of the time, there are also two browser differences.
setAttribute ("className", value);
This expression applies to all IE versions prior to IE8.0, attention: IE8.0 does not support the "className" attribute of the.
setAttribute ("class", value); applicable to IE8.0 and firefox.
Method 1, both are written on:
var myObject = document.getElementById ("header"); myObject.setAttribute ("class", "classValue"); myObject.setAttribute ("className", "classValue"); / / set the header of the class as classValue
Method II, IE and FF support object.className, so you can write:
var myObject = document.getElementById ("header"); myObject.className = "classValue"; / / set the header of the class as classValue
Method 3, first determine browser type, browser type and then used according to the corresponding version.
4. The object width and height assignment problem
【Description】 FireFox analysis of similar obj.style.height = imgObj.height the statement is invalid.
【Treatment】 unified compatible use obj.style.height = imgObj.height + 'px';
3, DOM methods and object reference
【Description】 first view of a set of code:
<! - Input object access 1 -> <input type="button" value="click me" ōnclick="alert(id.value)"/>
In Firefox, the button did not respond, in IE, you can, because for IE is an HTML element's ID can be directly in the script as a variable name to use, and Firefox, can not.
【Treatment】 compatible W3C DOM as far as possible the wording of access to the object when using document.getElementById ("id") to access the object ID and an ID must be unique in the page, the same label name in order to access When an object with document.getElementsByTagName ("div") . The way to get more browser support.
<! - Input object access 2 -> <input type="button" value="click me" />
2. Collections Object Access
【Description】 IE analysis, you can use () or  for a collection class object; Firefox, the only use  for a collection class object. Such as:
document.write (document.forms ("formName"). src); / / under the wording of the IE can access to the Form object scrc property deal】 【compatible to document.forms ("formName") to document.forms [ "formName"]. Unified use  for a collection class object.
3. Frame of reference
【Description】 IE analysis can access the id or name corresponding to the window frame object, but Firefox can only be accessed by name in this frame corresponds to the window object.
For example, if the frame label written on the top of the window inside the htm inside, so you can access:
IE: window.top.frameId or window.top.frameName to access the window object;
Firefox: can this window.top.frameName to access the window object.
【Treatment】 compatible frame of the name used to access the frame objects, In addition, in both IE and Firefox can be used window.document.getElementById ("frameId") to access the frame object.
【Description】 IE in support of the use parentElement and access to the parent node parentNode. The Firefox can only use parentNode.
【Treatment】 compatible for firefox and IE support the DOM, so the unification of the parent node using the parentNode to visit.
5. Table operation
【Description】 analysis under the table in both IE using innerHTML or appendChild into <tr> have no effect, but other browsers are displayed normal.
【Treatment】 compatible solution is to add the table of <tbody> <tr> elements, such as shown below:
var row = document.createElement ("tr"); var cell = document.createElement ("td"); var cell_text = document.createTextNode ("Insert the contents of the"); cell.appendChild (cell_text); row.appendChild (cell ); document.getElementsByTagName ("tbody") . appendChild (row);
6. Remove node removeNode () and removeChild ()
【Description】 appendNode of IE and Firefox at all under normal use, but only in IE under removeNode use.
removeNode method function is to delete a node, the syntax for the node.removeNode (false) or node.removeNode (true), the return value is the node to be deleted.
removeNode (false) that only delete the specified node, then the child node of this node's original upgrade of the original parent node child node.
removeNode (true) that remove the specified node and all its subordinate nodes. Deleted node, the node has become isolated, no longer has a child node and parent node.
【Treatment】 compatible with Firefox in the node is not removeNode it can only be replaced with the removeChild method, first return to the parent node, the node removed from the parent node to be removed.
node.parentNode.removeChild (node); / / ie and firefox in order to be able, under normal use, to take on the level of the parent node, then remove.
7. ChildNodes access node
【Description】 childNodes of the underlying meaning of the next IE and Firefox different, look at the following code:
<ul> <li> 1 </ li> <li> 2 </ li> <li> 3 </ li> </ ul> <input type=button value="click me!">
Were run with IE and Firefox, IE the result is 3, while Firefox is 7. Firefox use the DOM specification, "# text", said the text (actually meaningless spaces and line breaks, etc.) will be resolved in the Firefox into a node, in IE only meaningful in the text will resolve into a "# text . "
Method 1, for child nodes, can node.getElementsByTagName () to avoid this problem. But the getElementsByTagName DOM structure of the complex traversal obviously not as good as using childNodes, because of better handling of DOM childNodes hierarchy.
The second method in practical use, Firefox child nodes in the traversal, we might add in the for loop:
if (childNode.nodeName == "# text") continue; / / Or use the nodeType == 1.
So you can skip some of the text node.
"IE and FireFox in the childNodes difference"
8. Firefox can not support the innerText
【Description】 Firefox does not support analysis of innerText, it supports textContent to achieve innerText, but not as innerText textContent considered as elements of display mode, so I do not fully compatible with IE. If you do not textContent, the string does not contain HTML code which can also be used instead of innerHTML. Js can also write a method to achieve, refer to "achieve innerText property to firefox" article.
【Treatment】 compatible browser by judging the type of compatibility:
if (document.all) (document.getElementById ('element'). innerText = "my text";) else (document.getElementById ('element'). textContent = "my text";)
4, event handling
【Description】 look at a piece of code analysis
function et () (alert (event); / / IE: [object])
IE is running above code results in the [object], but can not run in Firefox.
Because in the IE window object in the event as an attribute can be used directly, but in Firefox, but use the W3C's model, it is by way of mass participation in the event spread, meaning that you need for your function is to provide an event response interface.
【】 To add event handling compatible to judge, according to the different browser to get the correct event:
function et () (evt = evt? evt: (window.event? window.event: null); / / compatible with IE and Firefox alert (evt);)
2. Keyboard values obtained
【Description】 IE and Firefox of access to the keyboard value of different methods, can be understood, Firefox and IE under event.which event.keyCode under considerable. On different, refer to "Keyboard event keyCode, which and charCode compatibility test"
function myKeyPress (evt) (/ / compatible with IE and Firefox get keyBoardEvent object evt = (evt)? evt: ((window.event)? window.event: "") / / compatible with IE and Firefox var key object was keyBoardEvent key = evt.keyCode? evt.keyCode: evt.which; if (evt.ctrlKey & & (key == 13 | | key == 10)) (/ / while pressing the Ctrl and the Enter key / / do something; ))
3. Access to the event source
【Description】 analysis commissioned by the use of the event, when judged by the event source for which elements from the event in the end, however, under IE, event objects are srcElement property, but there is no target attribute; Firefox under, even objects with target attributes, but no srcElement property.
ele = function (evt) (/ / capture the role of the current event object evt = evt | | window.event; return (obj = event.srcElement? event.srcElement: event.target;);)
4. Event listener
【Note】 In case of monitoring processing, IE provides the attachEvent and detachEvent two interfaces, while Firefox offers the addEventListener and removeEventListener.
【Treatment】 compatible simplest treatment is to package the two sets of compatibility interface:
function addEvent (elem, eventName, handler) (if (elem.attachEvent) (elem.attachEvent ("on" + eventName, function () (handler.call (elem))); / / here use the callback function call ( ), so this point elem) else if (elem.addEventListener) (elem.addEventListener (eventName, handler, false);)) function removeEvent (elem, eventName, handler) (if (elem.detachEvent) (elem.detachEvent (" on "+ eventName, function () (handler.call (elem))); / / here use the callback function call (), so this point elem) else if (elem.removeEventListener) (elem.removeEventListener (eventName, handler , false);))
Require special attention, Firefox, the event handler in this point to be monitored element itself is not the case in the next IE, use the callback function call, to monitor the current context point to the element.
5. Right here
【Description】 IE under analysis, even objects with x, y properties, but no pageX, pageY property; Firefox under, even objects have pageX, pageY property, but there is no x, y properties.
【Treatment】 compatible use mX (mX = event.x? Event.x: event.pageX;) instead of IE or Firefox under event.x under event.pageX. Complex point absolute position should also be considered.
function getAbsPoint (e) (var x = e.offsetLeft, y = e.offsetTop; while (e = e.offsetParent) (x + = e.offsetLeft; y + = e.offsetTop;) alert ("x:" + x + "," + "y:" + y);)
5, compatible with other treatment differences
Analysis shows】 【new ActiveXObject ("Microsoft.XMLHTTP"); only play a role in IE, Firefox does not support, but support for XMLHttpRequest.
function createXHR () (var xhr = null; if (window.XMLHttpRequest) (xhr = new ActiveXObject ("Msxml2.XMLHTTP");) else (try (xhr = new ActiveXObject ("Microsoft.XMLHTTP");) catch () (xhr = null;)) if (! xhr) return; return xhr;)
2. Mode and non-modal window
【Description】 IE can be analyzed by showModalDialog and showModelessDialog open modal and non-modal windows, but Firefox does not support.
】 【Solution directly window.open (pageURL, name, parameters) way to open a new window. If you need to pass parameters, you can use frame or iframe.
3. Input.type Attribute
Property is read-only under the input.type IE, but Firefox can be modified under
4. On select elements of option operation
Setting options, IE and Firefox different way of writing:
Firefox: can be set directly
option.text = 'foooooooo';
IE: only settings
option.innerHTML = 'fooooooo';
Select the option to delete a method:
select.options [i] = null;
IE6: need to write
select.options [i]. outerHTML = null;
5. Img alt and title of the resolution target
【Description】 img object of alt and title have two properties, difference is, alt: when the photo does not exist, or when prompted to load error.
title: photo tip description, if not defined in IE in the title, alt the tip can also be used as an img, but in Firefox, the two are completely in accordance with the standard definition used in
Img object in the definition.
Compatible with the best deal】 【alt and title objects will write the whole, to ensure a variety of browsers can be used normally.
6. Img's src refresh problem
【Note】 a look at the code analysis:
In IE, the code can be used to refresh the image, but not work under FireFox. The main problem is the cache.
Compatible processing】 【back in the address by adding a random number to resolve: