A very good article about the differences between js and css in IE and FireFox [Reprinted from Catching Fire]_Experience exchange

I saw this article on Blue, and I feel that the author summarized it well, at least some of which I have not really understood. These things should really be summarized, but unfortunately I am a lazy person, so I collected them here to facilitate my own learning!

1.firefox cannot support innerText.
Firefox supports innerHTML but not innerText. It supports textContent to implement innerText, but the extra spaces are also retained by default. If textContent is not used, innerHTML can be used instead if the string does not contain HTML code.
2. Disable selection of web content:
In IE, js is generally used: obj.onselectstart=function(){return false;}
And firefox uses CSS:-moz- user-select:none

3. Filter support (eg: 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 function is required to pass the event object
obj.onmousemove=function(ev){


6.Boundary issues with elements such as DIV:
For example: setting the CSS of a div::{width:100px;height:100px;border:#000000 1px solid; }
In IE: div width (including border width): 100px, div height (including border width): 100px;
And firefox: div width (including border width): 102px, div height ( Including border width): 102px;


So when making this dragging window that is compatible with IE and Firefox, you need to use your brain in the writing of js and css. Here are two tips for you

1. Determine the browser type:
var isIE=document.all? true:false;
I wrote a variable. If it supports document.all syntax, then isIE=true, otherwise isIE=false
2. CSS processing under different browsers:
Generally, you can use !important to prioritize the use of css statements (only supported by firefox)
For example: {border-width:0px!important;border- width:1px;}
This element has no border under Firefox, but the border width is 1px under IE


Several differences between XHTML and JS and CSS under normal conditions

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

Several differences under the XHTML standard:
1.document.documentElement and document.body
Be sure to use it when setting the CSS of the page in the code ：document.documentElement
For example: document.documentElement.style.overflow='hidden';
overflow-X, overflow-Y, these two coordinate attributes are not supported by XHTML;

2 .Document.documentElement must also be used when obtaining the web page window area and scroll bar displacement distance
That is, these four properties (clientWidth, clientHeight, scrollLeft, scrollTop) must be used document.documentElement
But document.body. appendChild() and document.body.removeChild() can be used, but if you use document.documentElement.appendChild() and document.documentElement.removeChild() instead, an error will be reported;

To summarize, only clientWidth, document.documentElement is only used for clientHeight, scrollLeft, scrollTop and document.documentElement.style

3.After this standard was added, the border issue of IE has also changed, and it is now consistent with Firefox. Is this the advantage of XHTML - a cross-browser standard?
As mentioned above:
Setting a div CSS::{width:100px;height:100px;border:#000000 1px solid;}
In IE (normal situation): 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 standard (IE and firefox Reconciled, ^_^):
IE (XHTML): div width (including border width): 102px, div height (including border width): 102px;
firefox (XHTML)::div The width (including border width): 102px, the height of div (including border width): 102px;