Differences between JS in Firefox and IE browsers (excerpt)

Internet Explorer is replaced by IE and mozzila Firefox is replaced by MF.
1. Document. Form. Item Problems
(1) existing problems:
Existing Code There are many statements such as document. formname. Item ("itemname"), which cannot be run in MF.
(2) solution:
Use document. formname. elements ["elementname"]
(3) Others
See 2

2. Collection class Object Problems
(1) existing problems:
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by MF.
(2) solution:
Use [] as the subscript operation. For example, change document. Forms ("formname") to document. Forms ["formname"].
For example, change document. getelementsbyname ("inputname") (1) to document. getelementsbyname ("inputname") [1]
(3) Others

3. window. event
(1) Existing Problem:
Use window. event cannot run on MF
(2) solution:
MF events can only be used in the event. This problem cannot be solved for the time being. The work und is as follows:
the original code (can be run in IE ):

...

New Code (run in IE and MF ):

...

function gotosubmit (EVT) {
EVT = EVT? EVT: (window. event? Window. event: NULL);
...
alert (EVT); // use EVT
...
}< br>
In addition, if the first line of the new Code is not changed, it is the same as the old code (that is, no parameter is provided for the gotosubmit call ), it can only be run in IE, but no error occurs. Therefore, the TPL part of this solution is still compatible with the old code.

4. Question about the ID of an HTML object as the object name
(1) Existing Problems
In ie, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. It cannot be in MF.
(2) Solution
Use getelementbyid ("idname") instead of idname as the object variable.

5. The problem of getting an object using the idname string
(1) Existing Problems
In IE, Eval (idname) can be used to obtain the HTML object with ID as idname, which cannot be used in MF.
(2) Solution
Use getelementbyid (idname) instead of eval (idname ).

6. The variable name is the same as the ID of an HTML object.
(1) Existing Problems
In MF, because the Object ID is not the name of the HTML object, you can use the same variable name as the HTML Object ID, which cannot be used in IE.
(2) Solution
When declaring variables, add VaR to avoid ambiguity, so that it can run normally in IE.
In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors.
(3) Others
See question 4

7. event. X and event. Y
(1) Existing Problems
In ie, the event object has the X and Y attributes, and MF does not.
(2) Solution
In MF, event. X is equivalent to event. pagex. But event. pagex IE does not.
Therefore, event. clientx is used instead of event. X. This variable is also available in IE.
Event. clientx is slightly different from event. pagex (when the page has a scroll bar), but most of the time it is equivalent.

If it is the same, it may be a little troublesome:
MX = event. X? Event. X: event. pagex;
Use MX instead of event. x
(3) Others
Event. layerx is available in both IE and MF. There is no difference in the specific significance of this function.

8. About Frame
(1) Existing Problems
In ie, the frame can be obtained using window. testframe, but not in MF.
(2) Solution
The main difference between MF and IE in frame usage is:
If the following attributes are written in the frame tag:
<Frame src = "xx.htm" id = "frameid" name = "framename"/>
Then Ie can access the window object corresponding to this frame through ID or name.
However, MF can only access the window object corresponding to this frame through name.
For example, if the above frame label is written in the HTM in the top window, you can access
IE: window. Top. frameid or window. Top. framename to access this window object
Mf: only window. Top. framename can access this window object.

In addition, both mfand iecan use javasdesktop.doc ument. getelementbyid ("frameid") to access the frame tag.
In addition, you can switch the frame content through the parameter top.doc ument. getelementbyid ("testframe"). src = 'xx.htm '.
You can also switch the frame content through window. Top. framename. Location = 'xx.htm '.

9. In MF, attributes defined by myself must be obtained by getattribute ().
10. If there is no parentelement parement. Children in MF, use
Parentnode. childnodes
Childnodes has different meanings in IE and MF. MF uses Dom specifications, and blank text nodes are inserted in childnodes.
You can avoid this problem by using node. getelementsbytagname.
When a node in HTML is missing, ie and MF have different interpretations of parentnode, for example
<Form>
<Table>
<Input/>
</Table>
</Form>
In MF, the value of input. parentnode is form, while that of input. parentnode in IE is empty.

The node in MF does not have the removenode method. You must use the following method: node. parentnode. removechild (node)

11. Const Problems
(1) existing problems:
You cannot use the const keyword in IE. For example, const constvar = 32; in IE, This Is A syntax error.
(2) solution:
Use VaR instead of Const.

12. Body object
The MF body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.

13. url Encoding
In JS, if the URL is written, write directly & do not write & for example, VAR url = 'xx. jsp? Objectname = XX & objectevent = XXX ';
FRM. Action = URL, so it is very likely that the URL will not be properly displayed, so that the parameter is not correctly transmitted to the server.
Generally, the server reports that the error parameter is not found.
Of course, if it is an exception in TPL, because TPL complies with the XML specification, the requirements are as follows &
Generally, MF cannot recognize &

14. nodename and tagname Problems
(1) existing problems:
In MF, all nodes have a nodename value, but textnode does not have a tagname value. In IE, nodename usage seems to be
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.

15. Element attributes
The input. Type attribute in IE is read-only, but can be modified in MF.

16. Document. getelementsbyname () and document. All [name] Problems
(1) existing problems:
In IE, neither getelementsbyname () nor document. All [name] can be used to obtain the DIV element (whether there are other elements that cannot be retrieved is unknown ).

W3C is a standard, rather it is a hassle. All Firefox users agree to use it, but I would rather not have it !! Suffering from thisProgramClerk, ah

The following details are only for IE and Firefox, and are not tested by other browsers.

1. doctype affects CSS Processing

2. FF: When Div sets margin-left and margin-Right to auto, it is already centered, and IE does not work.

3. FF: when setting text-align for the body, set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

4. FF: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

5. FF: supported! Important, ie is ignored, available! Important sets a special style for FF

6. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.

7. cursor: pointer can display the cursor finger in IE ff at the same time. Hand can only be IE

8. FF: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.

9. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:
Div {margin: 30px! Important; margin: 28px ;}
Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:
Div {maring: 30px; margin: 28px}
If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

10. The box interpretations of ie5 and IE6 are inconsistent.
Under ie5
Div {width: 300px; margin: 0 10px 0 10px ;}
The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can make the following changes:
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}
I don't quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

11. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we first define
Ul {margin: 0; padding: 0 ;}
Most problems can be solved.

12. When you set horizontal center alignment for the DIV, add "margin: Auto" to the sub-Div to be compatible with the Firefox browser.

13. When the DIV layout is not arranged as set in text-align, float is used to implement

14. Change the <p> label style to: margin: 0px; line-Height: xxpx to avoid unexpected results in the Firefox browser.

15. to reduce the indentation of UL, ol, and other lists, the style should be written as: List-style: none; margin: 0px; padding: 0px;, where the margin attribute is valid for IE, the padding attribute is valid for Firefox.

16. Padding 5px 4px 3px 1px Firefox cannot be abbreviated. It must be changed to padding-top: 5px; padding-Right: 4px; padding-bottom: 3px; padding-left: 1px;

Note:

1. The DIV of float must be closed.

Example: (floata and floatb attributes have been set to float: Left ;)
<# Div id = "floata"> </# div>
<# Div id = "floatb"> </# div>
<# Div id = "notfloatc"> </# div>
The notfloatc here does not want to continue translation, but wants to move down.
This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.
In
<# Div class = "floatb"> </# div>
<# Div class = "notfloatc"> </# div>
Add
<# Div class = "clear"> </# div>
This Div must pay attention to the declaration position. It must be placed in the most appropriate place and must be at the same level as two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception may occur.
And define the clear style as follows:
. Clear {
Clear: Both ;}
In addition, in order to automatically adapt to the height, overflow: hidden should be added to the wrapper;
When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.
For example, a wrapper is defined as follows:
. Colwrapper {
Overflow: hidden;
Zoom: 1;
Margin: 5px auto ;}

2. The problem of doubling margin.

The DIV set to float doubles the margin set in IE. This is a bug in IE6.
The solution is to add the display: inline In the div;
For example:

<# Div id = "imfloat"> </# div>

The corresponding CSS is

# Iamfloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */}

3. Container inclusion relationships

In many cases, especially when the container has a parallel layout, such as two or three float Divs, the width is prone to problems. In ie, the width of the outer layer is broken by the DIV with a wider inner layer. You must use Photoshop or firework to obtain pixel-level precision.

4. Questions about height

If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)

5. the most cruel means -! Important;

If there is no way to solve some detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore it.
. Tabd1 {
Background: URL (/RES/images/up/tab1.gif) No-repeat 0px 0px! Important;/* style for FF */
Background: URL (/RES/images/up/tab1.gif) No-repeat 1px 0px;/* style for IE */}
It is worth noting that XXXX must be added! Important is placed on the other sentence, which has been mentioned above

1. Firefox does not parse the annotation very well. It does not parse the following annotation very well:
<! ---------------- Comment ---------------------->
This will make your page lose a lot of content in Firefox.

2. IE is a little strange about align parsing of <TD>. It won't center the text in it. In fact, it looks like it is right aligned, the text-align setting in CSS on TD is also the same effect. Therefore, the text is still marked with <center>. This Firefox resolution is correct.

3. Firefox parses the table strictly by size. Therefore, do not define 100% on TD easily. Unless necessary, your table will be very large. For example, the table width is 100. If width = 100% is defined in one TD, the width of the table is 100, and the other width is not reduced.

4. there is a big difference between the two browsers for parsing the background image of textarea, mainly reflected in the background-attachment attribute. The scroll value in IE is calculated based on the page's scroll bar, in Firefox, it is calculated based on the scroll bar of the text box. That is to say, setting background-Attachment: Scroll in IE is no problem, however, in Firefox, it must be set to background-Attachment: fixed. This problem is very difficult to solve unless different browsers are determined and different CSS is provided.

5. In many cases, the padding Calculation Method of Firefox is different from that of IE. There is not much time to experiment with this.