Differences between IE and Firefox in JS usage

1. Firefox cannot support innertext.
Firefox supports innerhtml but does not support innertext. It supports textcontent to implement innertext, but by default, redundant spaces are retained. If textcontent is not required, you can use innerhtml instead if the string does not contain HTML code.
2. Prohibit the selection of webpage content:
JS: obj. onselectstart = function () {return false;} is generally used in IE ;}
Firefox uses CSS:-moz-user-select: None
3. Filter support (for example, transparent filter ):
IE: filter: alpha (opacity = 10 );
Firefox:-moz-opacity:. 10;
4. Capture 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: The event object needs to be passed by the event function.
OBJ. onmousemove = function (EV ){
X = eV. pagex; y = eV. Pagey;
}
6. Limitations of Div and other elements:
For example, set CSS ::{ width: 100px; Height: 100px; Border: #000000 1px solid;} Of a div ;}
In ie: div width (including Border width): 100px, div height (including Border width): 100px;
Firefox: div width (including Border width): 102px, div height (including Border width): 102px;
So when we drag windows compatible with IE and Firefox, we need to use some brains to write JS and CSS, and give you two tips.
1. Determine the browser type:
VaR isie = Document. All? True: false;
I wrote a variable. If the document. All syntax is supported, isie = true; otherwise, isie = false.
2. CSS processing in different browsers:
Generally, it can be used! Important Uses CSS statements first (only supported by Firefox)
For example: {border-width: 0px! Important; border-width: 1px ;}
In Firefox, this element has no border, and the Border Width under IE is 1px.
1.doc ument. formname. Item ("itemname ")
Problem description: in IE, you can use document. formname. item ("itemname") or document. formname. elements ["elementname"]; In Firefox, only document. formname. elements ["elementname"].
Solution: Use document. formname. elements ["elementname"].
2. Collection class Object Problems
Problem description: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects.
Solution: use [] to retrieve collection class objects.
3. Custom Attributes
Problem description: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getattribute () to obtain Custom Attributes. In Firefox, you can only use getattribute () obtain custom attributes.
Solution: Get custom attributes through getattribute.
4. eval ("idname") Problems
Problem description: in IE, you can use eval ("idname") or getelementbyid ("idname") to obtain the HTML object whose ID is idname; in Firefox, you can only use getelementbyid ("idname") to obtain the HTML object whose ID is idname.
Solution: getelementbyid ("idname") is used to retrieve the HTML object whose ID is idname.
5. The variable name is the same as the ID of an HTML object.
Problem description: in IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but not in Firefox. In Firefox, the variable name that is the same as the ID of the HTML object can be used, IE.
Solution: Use document. getelementbyid ("idname") to replace document. idname. We recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add the VaR keyword to avoid ambiguity.
6. Const Problems
Problem description: In Firefox, you can use the const keyword or var keyword to define constants. in IE, you can only use the VaR keyword to define constants.
Solution: Use the VaR keyword to define constants.
7. Input. Type attribute Problems
Problem description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.
Solution: do not modify the input. Type attribute. If you must modify it, You can first hide the original input, and then insert a new input element at the same position.
8. Window. Event Problems
Problem description: window. event can only be run in IE, but not in Firefox, because Firefox Event can only be used in the event.
Solution: add the event parameter to the function where the event occurs and use VaR myevent = EVT? 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
Problem description: in IE, the even object has the X and Y attributes, but does not have the pagex and Pagey attributes. In Firefox, the even object has the pagex and Pagey attributes, but does not have the X and Y attributes.
Solution: var myx = event. X? Event. X: event. pagex; var myy = event. Y? Event. Y: event. Pagey;
If you consider 8th issues, use myevent instead of event.
10. event. srcelement Problems
Problem description: in IE, the even object has the srcelement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcelement attribute.
Solution: Use srcobj = event. srcelement? Event. srcelement: event.tar get;
If you consider 8th issues, use myevent instead of event.
11. Window. Location. href
Problem description: in IE or firefox2.0.x, you can use window. Location or window. Location. href; In firefox1.5.x, you can only use window. location.
Solution: Use window. location to replace window. Location. href. Of course, you can also consider using the location. Replace () method.
12. Modal and non-modal window Problems
Problem description: in IE, you can open modal and non-modal windows through showmodaldialog and showmodelessdialog; in Firefox, you cannot.
Solution: Use window. Open (pageurl, name, parameters) to open a new window.
If you want to pass the parameters in the 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 child window, use VaR subwindow = Window. Open (pageurl, name, parameters); to obtain the new window object.
13. Frame and IFRAME Problems
The following frame is used as an example:
<Frame src = "xxx.html" id = "frameid" name = "framename"/>
(1) access the frame object
IE: Use window. frameid or window. framename to access this frame object;
Firefox: Use window. framename to access this frame object;
Solution: You can access the frame object by using the metadata Doc ument. getelementbyid ("frameid;
(2) Switching frame content
In both ieand firefox, you can use Upload upload Doc ument. getelementbyid ("frameid"). src = "xxx.html" or window. framename. Location = "xxx.html" to switch frame content;
If you want to return the parameters in the frame to the parent window, you can use the parent keyword in the frame to access the parent window.
14. Body Loading Problems
Problem description: Firefox's body object exists before the body tag is fully read by the browser, While IE's body object must exist after the body tag is fully read by the browser.
[Note] the problem has not been verified. You can modify it after verification.
[Note] It has been verified that IE6, opera9, and firefox2 do not have the above problems. A simple JS script can access all objects and elements that have been loaded before the script, this element is not loaded yet.
15. Event delegation Method
Problem description: Use document in IE. body. onload = inject; function inject () has been implemented before this; in Firefox, use document. body. onload = inject ();
Solution: Use document. Body. onload = new function ('inject () '); or document. Body. onload = function () {/* here is the code */}
[Note] differences between functions
16. Differences between parent elements for access
Problem description: in IE, use obj. parentelement or obj. parentnode to access the parent node of obj. In Firefox, use obj. parentnode to access the parent node of obj.
Solution: because both Firefox and IE support DOM, obj. parentnode is used 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 indicators.
Solution: Use Pointer in a unified manner.
18. innertext problems.
Problem description: innertext works normally in IE, but innertext does not work in Firefox.
Solution: Use textcontent instead of innertext in a non-IE browser.
Example:
If (navigator. appname. indexof ("Explorer")>-1 ){
Document. getelementbyid ('element'). innertext = "My text ";
} Else {
Document. getelementbyid ('element'). textcontent = "My text ";
}
[Note] innerhtml is supported by IE, Firefox, and other browsers at the same time. Others, such as outerhtml, are only supported by IE, so it is best not to use it.
19. Assignment of object width and height
Problem description: The statement similar to OBJ. style. Height = imgobj. Height in Firefox is invalid.
Solution: Use obj. style. Height = imgobj. height + 'px ';
20. Table Operation Problems
Problem description: operations on table labels vary with IE, Firefox, and other browsers. in IE, assignment of innerhtml values to table and TR is not allowed. When a TR value is added to JS, the appendchild method does not work.
Solution:
// Append an empty row to the table:
VaR ROW = otable. insertrow (-1 );
VaR cell = Document. createelement ("TD ");
Cell. innerhtml = "";
Cell. classname = "XXXX ";
Row. appendchild (cell );
[Note] I have never encountered this problem because I rarely use js to directly operate on tables. We recommend that you use the JS framework set to operate tables, such as jquery.
21. Questions about UL and ol list indentation
When the indentation of UL and ol lists is eliminated, the style should be written as: List-style: none; margin: 0px; padding: 0px;
The margin attribute is valid for IE and the padding attribute is valid for Firefox. This sentence is incorrectly expressed. For details, refer to the statement.
[Note] the problem has not been verified. You can modify it after verification.
[Note] It has been verified that in IE, setting margin: 0px can remove indentation, white spaces, list numbers, or dots from the top, bottom, and right of the list. Setting padding does not affect the style. In Firefox, setting margin: 0px can only remove the upper and lower spaces. After setting padding: 0px, only the left and right indentation can be removed. You must also set list-style: none to remove list numbers or dots. In other words, you can set only margin: 0px in IE to achieve the final effect. In Firefox, you must set both margin: 0px, padding: 0px, and list-style: none can achieve the final effect.
22. CSS transparency issues
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.
[Note] it is best to write both of them and put the opacity attribute below.
23. CSS rounded corners
IE: IE7 or earlier 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 rounded corner problem is a classic issue in CSS. We recommend that you use the jquery framework set to set the rounded corner so that you can leave these complicated problems for others to think about.
There are too many questions about CSS, and even the display effects of the same CSS definition in different page standards are different. A developing suggestion is that pages are written in the standard DHTML standard, with fewer tables. CSS definitions should follow the standard DOM as much as possible, while taking into account mainstream browsers such as IE, Firefox, and opera. BTW, in many cases, FF and opera's CSS interpretation standards are closer to CSS standards and more normative.

CSS processing in different browsers:
Generally, it can be used! Important Uses CSS statements first (only supported by Firefox)
For example: {border-width: 0px! Important; border-width: 1px ;}
In Firefox, this element has no border, and the Border Width under IE is 1px.

Differences between several pieces of XHTML and JavaScript and CSS IN NORMAL STATE
Adding this code at the beginning of the webpage 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 differences under the XHTML standard:
1.document.doc umentelement and document. Body
You must use: document.doc umentelement to set page CSS in the code.
For example: document.doc umentelement. style. Overflow = 'hidd ';
The two coordinate attributes of overflow-X and overflow-y, XHTML, are not supported;
2.use document.doc umentelement to determine the distance between the obtained webpage window and the selected scroll bar.
The four metrics (clientwidth?clientheight=scrollleft?scrolltop=must use document.doc umentelement
However, document. body. appendchild () and document. body. removechild () is usable, and document.doc umentelement is used. appendchild () and document.doc umentelement. if removechild () is replaced, an error is returned;
In summary, only document.doc umentelement is used when clientwidth1_clientheight1_scrollleft1_scrolltopand document.documentelement.style.
3. After this standard is added, the border problem of IE has also changed. Now it is consistent with that of Firefox. Is this the advantage of XHTML-cross-browser standard?
As mentioned above:
Set CSS ::{ width: 100px; Height: 100px; Border: #000000 1px solid;} Of a div ;}
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;
Added the XHTML standard (ie and Firefox ):
In IE (XHTML): div width (including Border width): 102px, div height (including Border width): 102px;
Firefox (XHTML): div width (including Border width): 102px, div height (including Border width): 102px;

1. The submission in Firefox is invalid.

* Description: In the project, a Commit (such as an. Submit () in JS; the form name in an) is written, but the click button is invalid when running in Firefox.
* Problem: Js in Firefox, when the form does not have the submit button, the JS submit will be invalid.
* Solution: Change the button type to submit. If you do not want to display this button, you can use CSS to hide it:

<Input type = 'submit 'style = 'display: none'/>
2. Display Mode dialog box in Firefox

* Description: displays a mode dialog box in Firefox.
* Problem: Js in Firefox does not have the window. showmodaldialog method. Currently, it seems that only Microsoft has it!
* Solution: Use the following method:

Required parameter open('openwin.html ', 'newwin', 'modal = Yes, width = 200, Height = 200, resizable = No, scrollbars = no ');

You only need to add modal = yes to the third parameter.
3. Passing results in the JS dialog box in Firefox

* Description: To meet this requirement, the user's operation results in the dialog box must be returned to the parent window. In Windows, window. returnvaule can be used to indicate
* Problem: Firefox does not have the window. returnvaule attribute.
* Solution: In Firefox, obtain the "Reference" of its parent window, find the component to update the value, and set the value. The method is as follows:

Assume that there is a Form in the parent window, and the form contains the text id = page. In the pop-up window, you can override parent.opener.doc ument. form. page. value = newvalues; in this way, you can complete the need to overwrite the value of the parent window in the pop-up window.

Window. Event
Window. event can be used in IE
In ff, the event can only be used at the scene where the event occurred, and can be rewritten to the event = function (event );
Function somemethod (EVT ){
EVT = EVT? EVT: (window. event? Window. Event: NULL );
Alert (EVT );
}
Example: <input onclick = somemethod (event)>

4. event. X and event. Y
In ie, the event object has the X and Y attributes.
FF, can be replaced by event. clientx, event. clienty (ie also has this attribute)
Also available: MX = event. X? Event. X: event. pagex;
5. Operate the frame
In IE, you can use window. framename to obtain the frame, but not in ff.
In ff, you can access the frame by using Comment comment top.doc ument. getelementbyid ("frameid ").
Note: Both ieand ffcan pass through zookeeper top.doc ument. getelementbyid ("frame "). src = 'somefile.htm' to switch the frame content, you can also use window. top. framename. location = 'somefile.htm' to switch the frame content
6. Call showmodaldialog.
In IE, you can use showmodaldialog to create a subwindow and obtain the returned value.
There is no showmodaldialog in FF, but it can be implemented using window. Open.
For example:
The main. cfm file contains the following code:
Function showitemlist (OBJ ){
If (document. All) {// IE
VaR returnvalue = Window. showmodaldialog ("itemlist. cfm? Id = 341 bytes, "self", "dialogwidth: 500px; Status: false ");
If (typeof (returnvalue )! = 'Undefined '){
OBJ. value = returnvalue;
}
}
Else {
VaR subwin = Window. Open (item. cfm? Id = 341, 'newwin', 'modal = Yes, width = 500px ');
}
}
Function returnvalue (returnvalue ){
OBJ = Document. getelementbyid ('elementname ');
OBJ. value = returnvalue;
}
If you want to get the return value, you need to use the parameter modal = yes of window. open, and you must pass the value (window. opener) to the parent window in the subwindow ).
For example, add the following code to subwin. cfm:
Function returnthisvalue (){
Window. opener. returnvalue (document. getelementbyid ('selecteditem'). value );
}

Difference between IE and Firefox in parsing CSS
High Resolution
IE: the actual height will be used even if the height of the image content is defined based on the height change of the content, including the undefined height of the image content, when the content exceeds the height

Firefox: when no height is defined, if the image content is included in the content, the MF height resolution is based on the printing standard, which will cause a highly inconsistent situation with the actual content; when the height is defined, but the content exceeds the height, the content will exceed the defined height, but the style used in the area will not change, resulting in style dislocation.

Conclusion: If you can determine the content height, you 'd better define the height. If there is no way to define the height, you 'd better not use the border style. Otherwise, the style will be messy!

Analysis of ALT and title of IMG objects
ALT: the prompt when the photo does not exist or the load error occurs;

Title: tip description of the photo.

If title is not defined in IE, ALT can also be used as the IMG tip. However, in MF, the two are completely used according to the standard definition.

Conclusion: when defining IMG objects, you can write both ALT and title objects to ensure that they can be used properly in various browsers.

Other details

When you write CSS, especially when you use float: left (or right) to arrange one-click images, you will find that there is a normal problem in Firefox and IE. No matter whether you use margin: 0 or border: 0 as the constraint, it will not help.

In fact, there is another problem here, that is, the processing of spaces by IE. Firefox ignores the processing of spaces between blocks by IE. That is to say, the end of a div should be followed by a DIV, and there should be no carriage return or space in the middle. Otherwise there may be problems, such as 3px deviation, and this cause is hard to find.

Unfortunately, I encountered this problem again, connecting multiple IMG labels and defining float: left. I hope these images can be connected. However, the results are normal in Firefox, and each IMG displayed in IE is 3 px apart. Deleting spaces between tags does not work.

Later, the solution was to set Li outside IMG and define margin: 0 for Li, which solved the display deviation between IE and Firefox. The explanation of some models by IE may cause many errors. You can only find the cause if you try more.

This is just a few simple differences. You can consider it comprehensively during layout and CSS design, but table is the most effective and simple solution to compatibility problems, the table has a good performance in terms of compatibility.

Nodename and tagname
(1) existing problems:
In MF, all nodes have a nodename value, but textnode does not have a tagname value. In IE,
Nodename usage
There is a problem (the test is not performed, but my IE has been killed several times ).
(2) solution:
Use tagname, but check whether it is empty.