Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about what is the difference between IE and Firefox in obtaining objects. Many people may not know much about it. In order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

The difference between IE and Firefox in getting objects

1. Object problem

1.1Form object

Existing problems:

The existing code that gets the form object through document.forms ("formName"), so that use in IE is acceptable, MF cannot.

Solution:

Use it as a subscript operation instead. Change to document.forms ["formName"]

Remarks

The formName in the subscript operation mentioned above is id and name

1.2HTML object

Existing problems:

In IE, the ID of the HTML object can be used directly as the subordinate object variable name of the document. Not in MF.

Document.all ("itemName") or document.all ("itemId")

Solution:

Use object ID as the object variable name

Document.getElementById ("itemId")

Remarks

Document.all is a custom method for IE, so please try not to use it.

There is another way that can be used in both IE and MF

Varf=document.forms ["formName"]

Varo=f.itemId

1.3DIV object

Existing problems:

In IE, DIV objects can be used directly using ID as the object variable name. Not in MF.

DivId.style.display= "none"

Solution:

Document.getElementById ("DivId") .style.display = "none"

Remarks

The method that gets the object, whether it is a DIV object or not, uses the getElementById method. See 1.2

1.4 about frame

Existing problems

You can use window.testFrame to get the frame,mf in IE.

Solution method

The main differences between MF and IE in the use of frame are:

If the following attributes are written in the frame tag:

Then IE can access the window object corresponding to the frame through id or name.

Mf can only access the window object corresponding to this frame through name.

For example, if the above frame tag is written in the htm in the top window, you can access it like this

IE:window.top.frameId or window.top.frameName to access the window object

MF: this is the only way to access this window object by window.top.frameName

In addition, you can use window.top.document.getElementById ("frameId") to access the frame tag in both mf and IE

And you can switch the content of frame through window.top.document.getElementById ("testFrame"). Src='xx.htm'

You can also switch the content of frame through window.top.frameName.location='xx.htm'.

1.5 window

Existing problems

Modal and modeless windows can be opened through showModalDialog and showModelessDialog in IE, but MF does not support it.

Solution.

Open a new window directly using the window.open (pageURL,name,parameters) method.

If you need to pass parameters, you can use frame or iframe.

two。 Summary

2.1When defining various object variable names in JS, try to use id and avoid using name.

In IE, the ID of the HTML object can be used directly as the subordinate object variable name of the document. Not in MF, so try to use id when you use it normally, and avoid using only name instead of id.

2.2 the problem that the variable name is the same as a HTML object id

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, but not in IE.

Solution method

When declaring variables, always add var to avoid ambiguity, so that it can work properly in IE.

In addition, * do not take the same variable name as the HTML object id to reduce errors.

1.document.all

Firefox is compatible with document.all, but generates a warning. You can use getElementById ("*") or getElementByTagName ("*) instead.

However, for properties such as document.all.length, they are completely incompatible.

2.parentElement

This is not compatible either. For example, obj.parentElement.name should be changed to obj [XSS _ clean]. Attributes.getNamedItem ("name"). NodeValue (I don't know how to write it more succinctly)

3.event

W3C does not support windows.event

For example:

In IE

. FunctiononMenuClick () {collapseMenu (event.srcElement);}

It's working fine. However, in Firefox, it is changed to:

FunctiononMenuClick (evt) {if (evt==null) evt=window.event;//ForIE varsrcElement=evt.srcElement?evt.srcElement:evt.target; / / IE uses srcElement, while Firefox uses target collapseMenu (srcElement);}

The difference between IE and FIREFOX in parsing CSS

Analysis of height by ◆

IE: will change according to the height of the content, including the picture content with no defined height. Even if the height is defined, when the content exceeds the height, the actual height will be used.

Firefox: when no height is defined, if the image content is included in the content, the high resolution of MF is based on the printing standard, which will cause a situation that is highly inconsistent with the actual content; when the height is defined, but the content exceeds the defined 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 * define the height, if there is really no way to define the height, * do not use the border style, otherwise the style will definitely be confused!

Parsing of ◆ img objects alt and title

Alt: tips for photos that do not exist or load errors

Title: the tip description of the photo.

Title,alt can also be used as a tip of img if it is not defined in IE, but in MF, both are used exactly as defined in the standard

Conclusion: when defining img objects, people write all alt and title objects to ensure that they can be used normally in all kinds of browsers.

Other differences in ◆ details

When you write css, especially when you use float:left (or right) to arrange a stream of pictures, you will find that it is normal in firefox and there is a problem in IE. Whether you use margin:0 or border:0 to restrain it, it doesn't help.

In fact, there is another problem here, that is, the handling of spaces by IE, which is ignored by firefox and the handling of spaces between blocks by IE. In other words, a div should be written immediately after a div, with no carriage return or spaces in the middle. Otherwise there may be problems, such as the deviation of 3px, and this reason is hard to find.

Unfortunately, I encountered this problem again, multiple img tags connected, and then defined float:left, hoping that these pictures can be linked together. But the result is normal in firefox and each img shown in IE is separated by 3px. It doesn't work if I delete all the spaces between the tags.

The later solution is to set li around img and define margin:0 to li, which solves the display deviation between IE and firefox. There are a lot of errors in IE's interpretation of some models, and the cause can only be found by trying a lot. These are just some simple differences, which can be considered comprehensively when doing layout and CSS design, but the most effective and simple solution to the compatibility problem is to use TABLE table, which has a good performance in terms of compatibility.

In addition, the compatibility of the two codes should also be considered in the JS design of the template.

After reading the above, do you have any further understanding of the difference between IE and Firefox in obtaining objects? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.