Very good about IE and Firefox js and CSS a few different points [transferred from prairie Ablaze]_ experience Exchange

See this article in blue, feel the author summed up the good, at least some I do not really know. These things really should be summed up, but I this person is lazy, collection of this, easy to learn!

1.firefox cannot support the innertext.
Firefox supports innerHTML but does not support innertext, it supports textcontent to achieve innertext, but by default the extra space is retained. If you don't use textcontent, you can replace it with innerHTML if the string contains no HTML code.
2. Prohibit selection of Web page content:
In IE, 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. Capture Event:
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 functions are required to pass event objects
Obj.onmousemove=function (EV) {
X= Ev.pagex; Y=ev.pagey;
}

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


So in doing this compatible with IE and Firefox drag windows, in the JS and CSS to the writing of the brain, to give you two tips

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

Two. CSS processing in different browsers:
You can generally use!important to prioritize CSS statements (Firefox only)
For example: {border-width:0px!important;border-width:1px;}
Under Firefox this element is not a border, in IE under the border width 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 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

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

2. Use document.documentelement when obtaining the page window area and getting the scroll 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 document.documentElement.appendChild () and Document.documentElement.removeChild () instead will be an error;

To summarize, only clientwidth, ClientHeight, ScrollLeft, scrolltop and Document.documentElement.style are used Document.documentelement

3. After adding this standard, IE's border problem has also changed, now and Firefox tend to be the same, 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): div width (including border width): 100px,div height (including border width): 100px;
Firefox (normal):: Div width (including border width): 102px,div height (including border width): 102px;

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