Compatibility between IE and FF in JS

For domestic designers, ie may be the most familiar browser, at least the most demanding. so far, in addition to foreign customers who have raised browser problems, I have rarely encountered browser compatibility problems in China. it seems that everyone has defaulted to various ie specifications, such as CSS specifications. although his CSS specification may be back to W3C standards. when it comes to W3C, we cannot mention Firefox. Firefox provides the best support for W3C standards, which is also an important reason for Firefox's great success.

In fact, I personally generally complete the joomla template design under IE, almost no use of Firefox until one day in a Singapore project, the customer told me that your template was changed in Firefox, at this time, I realized that we must consider the template design and it is also a very important issue-template compatibility, compatible with IE and Firefox browsers.

When it comes to compatibility with browsers, let's talk about the difference and connection between IE and Firefox.

Internet Explorer is developed by Microsoft. Up to now, the mainstream browsers installed on eight computers around the world have the strongest functions, the most abundant and popular content, however, we have also paid a huge price for security, constantly upgrading and patching, but it seems that there are always endless security risks, this may be an important reason why many people have switched to Firefox. however, I personally think that the richness of functions and content will naturally add n more security risks, which is unavoidable.

Firefox is an open-source browser supported by the Mozilla Foundation. because the kernel is completely different from IE. therefore, it solves many security risks of Internet Explorer and overcomes some Microsoft vulnerabilities. the latest version has just been released, and the download volume reaches 2.5 million in a week. It shows that Firefox is indeed good as a complementary alternative to Microsoft.

Let's take a look at the joomla template design. Generally, the joomla template is based on the DIV + CSS layout, but if you use some incompatible processing methods in this layout, the entire template may be distorted in Firefox. generally, both IE and Firefox have their own set of CSS standards. At present, Chinese users are still familiar with IE and are not very familiar with Firefox, including W3C standards.

The following lists some simple differences between IE and Firefox in parsing CSS.

2. 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!

4. 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 they can be used in various browsers.

6. 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.

In addition, when designing the JS template, you also need to consider the twoCodeThe following are some tests on IE and Js in Firefox:

Internet Explorer is replaced by IE and Mozilla Firefox is replaced by MF.

1. Document. Form. Item Problems
(1) existing problems:
There are many statements in the existing Code such as document. formname. Item ("itemname ").
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")
Document. Forms ["formname"].
For example, change document. getelementsbyname ("inputname") (1)
Document. getelementsbyname ("inputname") [1]
(3) Others

3. Window. Event
(1) existing problems:
Window. event cannot be run on MF.
(2) solution:
Mf events can only be used in the event. This problem cannot be solved. This can be changed as follows:
Original code (can be run in IE ):
<! -- <Input type = "button" name = "somebutton" value = "Submit" -->
Onclick = "javascript: gotosubmit ()"/>
...
<Script language = 'javascript '>
Function gotosubmit (){
...
Alert (window. Event); // use window. Event
...
}
</SCRIPT>

New Code (run in IE and MF ):
<! -- <Input type = "button" name = "somebutton" value = "Submit" -->
Onclick = "javascript: gotosubmit (event)"/>
...
<Script language = 'javascript '>
Function gotosubmit (EVT ){
EVT = EVT? EVT: (window. event? Window. Event: NULL );
...
Alert (EVT); // use EVT
...
}
</SCRIPT>
In addition, if the first line of the new Code is not modified, it is the same as the old code (that is, the gotosubmit call does not
Parameter. Therefore, the TPL part of this solution is still
Code compatibility.

//////////////////////////////////////// ///////////////////////////////
// The following is from llihua
// Event processing functions
Function A (EVT) {// Firefox
EVT = EVT? EVT: window. event; // IE
VaR srcelem = (evt.tar get )? Evt.tar get: EVT. srcelement;
// Event processing...
}
When connecting the event processing function, you can use the inline HTML method or the event
Property method definition.

1. Use inline HTML, such:
<! -- <Input type = "radio" name = "radio" value = "1" -->
Onclick = "javascript: A (event)">

Note:
(1) JavaScript cannot be saved;
(2) The real parameter must use event, and the parameter can use anything (such as EVT and event );

2. bind an event handler using event property, for example:
Document. form2.radio [0]. onclick =;
// The above is from llihua
//////////////////////////////////////// ///////////////////////////////

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. In
Mf cannot.
(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.
Yes.
(2) Solution
Use getelementbyid (idname) instead of eval (idname ).

6. variable names are the same as the ID of an HTML object
(1) Existing Problems
in MF, because the Object ID is not the name of an HTML object, therefore, you can use the same variable name as the HTML object
ID, which is not allowed in IE.
(2) solution
when declaring variables, all variables are added with VAR to avoid ambiguity, so that IE can run normally.
In addition, it is best not to take the same variable name as the HTML Object ID to reduce errors.
(3) Other
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 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
Windows can be used in IE. when testframe gets the frame, MF won't work.
(2) solution
the main difference between MF and IE in frame usage is:
If the following attributes are written in the frame tag:
then Ie can access the window object corresponding to this frame through ID or name
while 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: this is the only way to access this window. top. framename to access this window object

In addition, both MF and IE can use
too many top.doc ument. getelementbyid ("frameid")
to access the
frame tag
and you can use
extends top.doc ument. getelementbyid ("testframe "). src = 'xx.htm'
to switch the frame content
you can also use window. top. framename. location = 'xx.htm' to switch frame content
for details about frame and window, see 'window and framework' in BBS Article
and the tests under the/test/JS/test_frame/directory
---- adun 2004.12.09 modify

9. in MF, attributes defined by myself must be getattribute () obtained
10. there is no parentelement parement in MF. for children, use
parentnode. childnodes
the meanings of childnodes are different from those of MF. If MF uses the DOM specification, blank text nodes are inserted in childnodes.
.
you can avoid this problem by using node. getelementsbytagname.
when the HTML node is missing, ie and MF have different interpretations of parentnode, for example,

-->
input in MF. the value of parentnode is form, while input in IE. the value of parentnode is null.
the node in MF does not have the removenode method. The following method must be used.
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
Mf's body exists before the body tag is fully read by the browser, while ie must be fully read in the body.
And then exist

13. url Encoding
Write the URL directly in JS. Do not write the URL directly. 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
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 ).

17. DOM data island Problems
(1) Existing Problems
In IE, Tags have special meanings. They can contain xml dom and implement data with HTML components.
Binding. In MF, It is just an unknown tag.
In addition, for IE, It actually means that this is an ActiveX object, but it is attached to an HTML object.
as a node under the DOM tree, the traversal of the DOM tree will be seriously affected.
(2) Solution
the Data Binding Mechanism of IE can be simulated using JS, but it is too troublesome. We recommend that you do not use the data binding mechanism or
Find a library to implement this simulation. We will only discuss how to implement Dom compatibility.
in MF, both known HTML tags and other tags that comply with XML specifications are processed using a uniform DOM tree.
, therefore, MF can actually use DOM data island, but it is slightly different from IE in that
it is a DOM document, while mf is just a DOM node. This difference is usually not enough.
however, there is a small detail. To be compatible with HTML syntax, MF cannot identify abbreviated empty tags.
for example: ,
and is a simplified form that prevents MF from being recognized and should be written as follows: