IE and Firefox (Firefox) browser for JS and CSS support differences

Source: Internet
Author: User
Tags add filter window visual studio
IE and Firefox (Firefox) browser to the JS and CSS support of a few different places:

1.firefox cannot support innertext, nor do I know why. Firefox support innerHTML but do not support innertext, so the Internet check, the original it to support textcontent to achieve innertext, but not so good, the default to the extra space also retained. If you don't use textcontent, you can replace it with innerHTML if it doesn't contain 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

also found a few XHTML and normal state of JS, CSS differences
The previous stage has written a compatible Ie/firefox drag window found a few differences between the two browsers: found a few IE and Firefox js and CSS a few different points "original"
Today, I wrote a compatible version of XHTML, because now is not a popular web standard, I can not fall behind Ah! And now all the pages in asp.net are applying XHTML standards, and if you delete this standard code in the layout page, the layout and controls inside the Visual Studio are not displayed.
Oh, at the beginning of the page add this code is called the XHTML standard <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Changed JS and CSS, debugging n times, found several different points of XHTML standards:
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;

So I summed up just clientwidth, clientheight, ScrollLeft, ScrollTop and Document.documentElement.style only use Document.documentelement.

3. Oh, add this standard after the Internet Explorer's border problem has also changed, and Firefox is now in line, is not this is the advantages of XHTML-Cross-browser standards
The previous article mentions:
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;


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.