Very good about IE and Firefox js and CSS a few different points [transfer from Catching Fire]_ experience Exchange

In the blue see this article, feel the author summed up well, at least some even I do not really know. These things really should be summed up, unfortunately I this person is more lazy, collected in this, easy to learn!

1.firefox cannot support innertext.
Firefox supports innerHTML but does not support innertext, it supports textcontent to implement innertext, but it also retains the extra space by default. If you do not need to textcontent, if the string contains no HTML code can also be replaced with innerHTML.
2. Prohibit the selection of Web content:
In IE, generally with js:obj.onselectstart=function () {return false;}
and Firefox uses Css:-moz-user-select:none

3. Filter Support (example: Transparent filter):
IE:filter:alpha (opacity=10);
firefox:-moz-opacity:.10;

4. Capturing events:
IE:obj.setCapture (), Obj.releasecapture ()
Firefox:document.addEventListener ("MouseMove", mousemovefunction,true);
Document.removeeventlistener ("MouseMove", mousemovefunction,true);

5. Get the mouse position:
IE:event.clientX, Event.clienty
Firefox: event function needs to pass event object
Obj.onmousemove=function (EV) {
X= Ev.pagex; Y=ev.pagey;
}

boundary problems for elements such as 6.DIV:
For example: Set a div's css::{width:100px;height:100px;border: #000000 1px solid;}
ie: width of div (including border width): height of 100px,div (including border width): 100px;
And the width of the firefox:div (including the border width): 102px,div height (including the border width): 102px;


So in this compatible with IE and Firefox drag windows, in the JS and CSS to write a bit of brain, give everyone two tips

One. Determine the browser type:
var isie=document.all? True:false;
I wrote a variable, if support document.all syntax so isie=true, otherwise isie=false

Two. CSS processing under different browsers:
You can use!important to prioritize CSS statements (Firefox support only)
For example: {border-width:0px!important;border-width:1px;}
In Firefox, this element is no border, under IE, the width of the border is 1px


Several XHTML and normal state of JS, CSS differences

Adding this code at the beginning of the page is the so-called XHTML standard.

Several different points under the XHTML standard:
1.document.documentelement and Document.body
Be sure to use the CSS in your code when you set the page: Document.documentelement
For example: document.documentelement.style.overflow= ' hidden ';
Overflow-x, overflow-y These two sub-coordinate attributes XHTML is not supported;

2. Use Document.documentelement to obtain the window area of the page and to get the scroll bar offset distance
That is, these four attributes (ClientWidth, ClientHeight, ScrollLeft, scrolltop) must be used Document.documentelement
But Document.body.appendChild () and Document.body.removeChild () are available, and with Document.documentElement.appendChild () and Document.documentElement.removeChild () instead will error;

Summarize clientwidth, ClientHeight, ScrollLeft, ScrollTop and Document.documentElement.style only with document.documentelement

3. After adding this standard, IE's border problem also changed, now and Firefox tend to be consistent, is not this is the advantage of XHTML-cross-browser standards
mentioned above:
Set the Css::{width:100px;height:100px;border of a div: #000000 1px solid;}
IE (normal): width of div (including border width): height of 100px,div (including border width): 100px;
Firefox (normal):: Div width (including border width): 102px,div height (including border width): 102px;

After adding XHTML standard (IE and Firefox hit and ^_^):
IE (XHTML): div width (including border width): height of 102px,div (including border width): 102px;
Firefox (XHTML):: Div width (including border width): height of 102px,div (including border width): 102px;

