Firefox and IE JS compatibility problem--the summary is quite complete, reprint come over

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
1.document.formname.item ("itemname") problem
Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formName.elements ["ElementName"];firefox, You can only use the document.formname.elements["ElementName"].
Workaround: Unify the use of document.formname.elements["ElementName"].
2. Collection Class object Problem
Problem Description: IE, you can use () or [] Get collection Class objects, Firefox, can only use [] Get collection class objects.
WORKAROUND: Use [] to get collection class objects uniformly.
3. Custom attribute Issues
Problem Description: IE, you can use to get the general properties of the method to obtain custom attributes, can also be used getattribute () derived from the definition of properties, Firefox, can only use getattribute () derived from the definition of attributes.
Workaround: The unification is obtained from the defined attribute through GetAttribute ().
4.eval ("idname") problem
Problem description: Under IE, you can use the eval ("Idname") or getElementById ("Idname") to get the HTML object ID idname; Firefox, only use getElementById ("Idname") To get the HTML object with the ID idname.
Workaround: Unify the getElementById ("Idname") to get the HTML object with the ID idname.
5. Variable name and an HTML object ID the same problem
Problem Description: IE, HTML object ID can be used as document subordinate object variable name directly use, Firefox can not; Firefox, you may use the same variable name as the HTML object ID, ie cannot.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take variable names with the same HTML object ID to reduce errors and, when declaring variables, add the var keyword to avoid ambiguity.
6.const Problem
Problem Description: Firefox, you can use the Const keyword or the var keyword to define constants, ie, only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.
7.input.type Property Problem
Problem Description: IE under the Input.type property is read-only, but Firefox under the Input.type property is read and 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 Problem
Problem Description: Window.event can only run under IE, but not under Firefox, this is because Firefox event can only be used in the scene of the incident occurred.
Workaround: Add the event argument to the function that occurred 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 objects have X, Y properties, but there is no Pagex, Pagey properties; Firefox, even objects have 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 the 8th question is considered, replace the event with MyEvent instead.
10.event.srcelement Problem
Problem description: Under IE, the even object has srcelement properties, but there is no target attribute; Under Firefox, even objects have the target attribute, but there is no srcelement attribute.
Workaround: Use Srcobj = event.srcelement? Event.srcElement:event.target;
If the 8th question is considered, replace the event with MyEvent instead.
11.window.location.href Problem
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, you can open modal and modeless windows via ShowModalDialog and showModelessDialog;
WORKAROUND: Open the new window directly using the window.open (Pageurl,name,parameters) method.
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. Use var Subwindow = window.open (pageurl,name,parameters) If you want the parent window to control the child window; 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) Access to the Frame object
IE: Use Window.frameid or window.framename to access this frame object;
Firefox: Use Window.framename to access this frame object;
Workaround: Unify the use of Window.document.getElementById ("Frameid") to access this frame object;
(2) Switch frame content
Window.document.getElementById ("Frameid") can be used in both IE and Firefox. src = "xxx.html" or window.frameName.location = "xxx.html" To toggle the contents of the frame;
If you need to return a parameter in a frame to the parent window, you can use the parent keyword in the frame to access it.
14.body Load Problem
Problem Description: Firefox's body object in the body tag is not fully read by the browser before the existence, and IE's body object must be in the body tag is fully read into the browser after the existence.
[note] This problem has not been validated and will be modified after verification.
[note] There are no such problems in IE6, Opera9, and FireFox2, and simple JS scripts can access all the objects and elements that have been loaded before the script, even if the element is not yet loaded.
15. Event Delegate Method
Problem description: Under IE, use document.body.onload = inject; where function inject () has been implemented before, under Firefox, using document.body.onload = inject ();
Workaround: Unify the use of document.body.onload=new Function (' inject () '); or document.body.onload = function () {/* Here is the code */}
Attention The difference between function and function
16. The difference between the parent elements of the access
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 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 support pointer, both are hand-shaped instructions.
Workaround: Unify the use of pointer.
18.innerText problem.
Problem description: InnerText in IE can work, 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, other, such as outerhtml, such as only by IE support, preferably not.
19. Object width and Height assignment problem
Problem Description: Firefox similar obj.style.height = imgobj.height statement is invalid.
Solution: Unified Use of Obj.style.height = Imgobj.height + ' px ';
Table Operational issues
Problem description: IE, Firefox and other browsers for table label operation are different, in IE not allowed to table and TR innerHTML assignment, use JS to add a TR, use the AppendChild method also no use.
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 directly to manipulate the table, this problem has not been encountered. It is recommended that you use the JS framework set to manipulate the table, such as jquery.
UL and ol list indent issues
Elimination of UL, OL and other lists of indentation, style should be written: list-style:none;margin:0px;padding:0px;
Where the margin property is effective for IE, the padding attribute is effective for Firefox. ← This statement is wrong, detailed see ↓
[note] This problem has not been validated and will be modified after verification.
[note] In IE, the setting margin:0px can remove the top and bottom indent of the list, the blank and the list number or the dot, setting the padding has no effect on the style; in Firefox, setting the margin:0px can only remove up and down whitespace, setting padding : 0px can only remove the left and right indentation, you must also set the List-style:none to remove the list number or dot. In other words, in IE only set margin:0px to achieve the final effect, and in Firefox must be set margin:0px, padding:0px and List-style:none three to achieve the final effect.
CSS Transparency Issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] The best two are written and the opacity attribute is placed below.
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] Fillet problem is a classic problem in CSS, it is recommended to use the jquery framework set to set rounded corners, so that these complex problems left to others to think about it.
There are too many problems with CSS, even the same CSS definition in different page standards to display the effect is not the same. A development recommendation is that the page is written using standard DHTML standards, with fewer TABLE,CSS definitions as much as possible in accordance with the standard DOM, while taking into account mainstream browsers such as IE, Firefox, and opera. BTW, in many cases, the CSS interpretation standards of FF and opera are closer to CSS standards and more prescriptive.