JS in the difference between IE and Firefox ...

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

1.document.formname.item ("ItemName") issues
Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formName.elements ["ElementName"];firefox, Use only document.formname.elements["ElementName"].
Workaround: Use document.formname.elements["elementname" uniformly.

2. Collection Class object Issues
Problem description: Under IE, you can use () or [] get the Collection class object; Firefox can only use [] to get the collection class object.
WORKAROUND: Use [] uniformly to get the collection class object.

3. Custom attribute Issues
Problem description: Under IE, you can get custom properties by using the method of getting the general properties, or you can use GetAttribute () to obtain the custom attributes, and under Firefox, you can only use getattribute () to derive the custom attributes.
Workaround: Unify through getattribute () to get the custom attributes.

4.eval ("Idname") issues
Problem description: Under IE, you can use eval ("Idname") or getElementById ("Idname") to get an HTML object with ID idname; Firefox can only use getElementById ("Idname") To get an HTML object with ID idname.
Workaround: Unify the getElementById ("Idname") to obtain an HTML object with ID idname.

5. The variable name has the same problem as an HTML object ID
Problem description: Under IE, the ID of the HTML object can be used directly as the subordinate object variable name of document, Firefox can not be used, Firefox, under the same name as the HTML object ID, ie cannot.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take the same variable name as the HTML object ID to reduce the error, and when declaring the variable, add the var keyword to avoid ambiguity.

6.const Problem
Problem Description: Under Firefox, you can use the Const keyword or the var keyword to define constants; Under IE, you can only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.

7.input.type Property Issues
Problem Description: The Input.type property under IE is read-only, but the Input.type property in Firefox is read-write.
WORKAROUND: Do not modify the Input.type property. If you have to modify it, you can hide the original input and then insert a new INPUT element in the same location.

8.window.event Problems
Problem Description: Window.event can only run under IE, but not under Firefox, because Firefox event can only be used on the spot where events occur.
Workaround: Add an event parameter to the function that occurred on the incident, and use var myevent = Evt?evt in the function body (assuming the parameter is EVT): (Window.event?window.event:null)
Example: <input type= "button" onclick= "DoSomething (event)"/>
<script language= "JavaScript" >
function DoSomething (evt) {
var myevent = evt?evt: (window.event?window.event:null)
...
}

9.event.x and EVENT.Y problems
Problem description: Under IE, even object has X, Y property, but no Pagex, Pagey property; Under Firefox, the even object has Pagex, Pagey properties, but no X, y properties.
Workaround: var myx = event.x? Event.x:event.pagex; var MyY = Event.y? Event.y:event.pagey;
If you consider question 8th, use MyEvent instead of event.

10.event.srcelement Problems
Problem description: Under IE, even object has Srcelement property, but no target property; Under Firefox, even object has the target property, but there is no srcelement attribute.
Workaround: Use Srcobj = event.srcelement? Event.srcElement:event.target;
If you consider question 8th, use MyEvent instead of event.

11.window.location.href Problems
Problem Description: Under IE or firefox2.0.x, you can use Window.location or window.location.href;firefox1.5.x, only use window.location.
WORKAROUND: Use window.location instead of window.location.href. Of course, you can also consider using the Location.replace () method.

12. Modal and non-modal window problems
Problem description: Under IE, the modal and non-modal windows can be opened via ShowModalDialog and showModelessDialog; Firefox can't.
WORKAROUND: Open a new window directly using window.open (pageurl,name,parameters).
If you need to pass parameters from a child window back to the parent window, you can use Window.opener in the child window to access the parent window. If you need a parent window to control the Subwindow, use var subwindow = window.open (pageurl,name,parameters); To get the newly opened window object.

13.frame and IFRAME issues
Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Accessing the Frame object
IE: Use Window.frameid or window.framename to access the frame object;
Firefox: Use Window.framename to access the frame object;
Workaround: Use Window.document.getElementById ("Frameid") to access the frame object uniformly;

(2) Toggle frame content
You can use Window.document.getElementById ("Frameid") in both IE and Firefox. src = "xxx.html" or window.frameName.location = "xxx.html" To switch the contents of the frame;
If you need to pass the parameters in the frame back to the parent window, you can use the parent keyword in the frame to access it.

14.body Loading Problems
Problem Description: The body object of Firefox exists before the body tag is fully read by the browser, while the body object of IE must exist after the body tag is fully read into the browser.
[note] This issue has not been verified and will be modified after verification.
[note] proven, IE6, Opera9, and FireFox2 do not have the above problem, the simple JS script can access all the objects and elements that have been loaded before the script, even if this element has not been loaded complete.

15. Event Delegation Method
Problem description: Under IE, use document.body.onload = inject; where function inject () has been implemented before, in Firefox, using document.body.onload = inject ();
Workaround: Use document.body.onload=new Function uniformly (' inject () '); or document.body.onload = function () {/* Here is the code */}
Note function and Function differences

16. The difference between the access parent element
Problem description: Under IE, use obj.parentelement or Obj.parentnode to access the parent node of obj; under Firefox, use Obj.parentnode to access the parent node of obj.
Workaround: Because both Firefox and IE support the DOM, the Obj.parentnode is used uniformly to access the parent node of obj.

17.cursor:hand VS Cursor:pointer
Problem Description: Firefox does not support hand, but IE supports pointer, both are hand-shaped instructions.
Workaround: Use pointer uniformly.

18.innerText problem.
Problem description: InnerText in IE can work normally, but innertext in Firefox but not.
WORKAROUND: Use textcontent instead of innertext in non-IE browsers.
Example:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). InnerText = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}
[note] InnerHTML at the same time by IE, Firefox and other browser support, and other, such as outerhtml only supported by IE, preferably not.

19. Object width and Height assignment problem
Problem Description: A statement similar to obj.style.height = Imgobj.height in Firefox is invalid.
Workaround: Unify the use of Obj.style.height = Imgobj.height + ' px ';

Table Operation Issues
Problem description: IE, Firefox and other browsers for the table label operation is different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, using the AppendChild method is not used.
Workaround:
Append a blank line to the table:
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);
[note] Since I rarely use JS direct operation of the table, this problem has not been met. It is recommended to use the JS frameset to manipulate table, such as jquery.

UL and ol list indent issues
Eliminate the UL, OL and other list of indentation, the style should be written as: list-style:none;margin:0px;padding:0px;
Where the margin attribute is valid for IE, the Padding property is valid for Firefox. ← This sentence is wrong, see the details ↓
[note] This issue has not been verified and will be modified after verification.
[note] experience, in IE, set margin:0px can remove the list of the upper and lower left and right indent, blank and list number or dot, set padding has no effect on the style; in Firefox, setting margin:0px can only remove the upper and lower spaces, set padding : Only the left and right indents can be removed after 0px, and List-style:none must be set to remove the list number or dot. In other words, in IE, only set margin:0px can achieve the final effect, and in Firefox must be set margin:0px, padding:0px and list-style:none three items to achieve the final effect.

CSS Transparency Issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] It is best to write all two, and put the opacity attribute below.

The css fillet problem
Ie:ie7 The following versions do not support rounded corners.
FF:-moz-border-radius:4px, or-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;- moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;.
[note] The fillet problem is a classic problem in CSS, and it is recommended to use the jquery frameset to set the fillet, leaving these complex questions to others.

There are too many questions about CSS, and even the same CSS definitions are not displayed in different page standards. A development recommendation is that the page is written using standard DHTML standards, with less table,css defined as much as possible in accordance with the standard DOM, while taking into account the main browsers such as IE, Firefox, opera and so on. BTW, in many cases, the FF and Opera CSS interpretation standards are closer to the CSS standard, but also more normative.

JS in the difference between IE and Firefox ...