Differences between IE and Firefox in js and css

1. document. form. item Problems
(1) existing problems:
Many statements such as document. formName. item ("itemName") exist in the existing code and cannot be run in Firefox.
(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 Firefox.
(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 problems:
Window. event cannot be run on Firefox
(2) solution:
The event of Firefox can only be used in the event. This problem cannot be solved for the moment. This can be changed as follows:
Original code (run in IE): <br/> <input type = "button" name = "someButton" value = "Submit" onclick = "javascript: gotoSubmit () "/> <br/>... <br/> <script language = "javascript"> <br/> function gotoSubmit () {<br/>... <br/> alert (window. event); // use window. event <br/>... <br/>}< br/> </script>

New Code (run in IE and Firefox): <input type = "button" name = "someButton" value = "Submit" onclick = "javascript: gotoSubmit (event) "/> <br/>... <br/> <script language = "javascript"> <br/> function gotoSubmit (evt) {<br/> evt = evt? Evt: (window. event? Window. event: null); <br/>... <br/> alert (evt); // use evt <br/>... <br/>}< br/> </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 provide a parameter), 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. Not in Firefox.
(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 Firefox.
(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 Firefox, 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 can be 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 Firefox does not.
(2) Solution
In Firefox, 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 Firefox. There is no difference in the specific significance of this feature.

8. About frame
(1) Existing Problems
In IE, you can use window. testFrame to obtain the frame, but not in Firefox.
(2) Solution
The main difference between Firefox 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.
Firefox 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
Firefox: only window. top. frameName can access this window object.

In addition, you can use tranquility top.doc ument. getElementById ("frameId") to access the frame tag in Firefox and ie.
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 '.
For details about frame and window, see the 'window and framework' article in bbs.
And the tests under the/test/js/test_frame/directory
---- Adun 2004.12.09 Modification

9. In Firefox, the property defined by myself must be obtained by getAttribute ().
10. Use parentElement parement. children in Firefox
ParentNode. childNodes
The meanings of childNodes are different from those of Firefox. Firefox inserts blank text nodes in childNodes using DOM specifications.
You can avoid this problem by using node. getElementsByTagName.
When the html node is missing, IE and Firefox have different interpretations of parentNode, for example
<Form>
<Table>
<Input/>
</Table>
</Form>
In Firefox, the value of input. parentNode is form, while that of input. parentNode in IE is empty.

The node in Firefox 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
Firefox's body exists before the body label 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 & amp; for example, var url = 'xx. jsp? ObjectName = xx & amp; 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 and requires & writes as & amp;
Firefox cannot recognize & amp; in js;

14. nodeName and tagName Problems
(1) existing problems:
In Firefox, 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 Firefox.

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

17. IE can use document. getElementsByID ('btn _ xx'). click (), Firefox cannot accept it. To accept it, you can use _ doPostBack (btn_xx ,'');

18. firefox does not support innerText, and does not know why. Firefox supports innerHTML but does not support innerText, so I checked it online and changed it to support textContent to implement innerText. However, the implementation is not so good. By default, extra spaces are retained. If textContent is not required, you can use innerHTML instead if the string does not contain HTML code.

19. Prohibit the selection of webpage content:
Js: obj. onselectstart = function () {return false;} is generally used in IE ;}
Firefox uses CSS:-moz-user-select: none

20. Filter support (for example, transparent filter ):
IE: filter: alpha (opacity = 10 );
Firefox:-moz-opacity:. 10;

21. DIV and other element boundary issues:
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;

22. in FireFox, non-float div has a float div of the same parent level. If this div has a background image, you must use clear: both to display the background image, clear: both is not used in IE6.0.

23. In the [text-decoration: underline] attribute, the underline displayed in IE6.0 is a little lower than that in FireFox. In FireFox, some strokes are about one pixel below the underline.

24. CSS compatibility highlights:
DOCTYPE affects CSS Processing
FF: When div sets margin-left and margin-right to auto, it is already centered, and IE is not working.
FF: When you set text-align for the body, you must set margin: auto (mainly margin-left, margin-right) for the div to be centered.
FF: After padding is set, the div will increase the height and width, but IE will not, so we need to use it! Set one more height and width for important.
FF: Yes! Important, IE is ignored, available! Important sets a special style for FF
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.
Cursor: pointer can display the cursor finger shape in ie ff at the same time, hand only IE Can
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.

25.

Image Summary: CSS Hack writing in Firefox, IE6, and IE7: (orange represents FF, blue represents IE6, and green represents IE7)

Difference between IE6 and FF:

Background: orange; * background: blue;

Difference between IE6 and IE7:

Background: green! Important; background: blue;

Difference between IE7 and FF:

Background: orange; * background: green;

Difference FF, IE7, IE6:

Background: orange; * background: green! Important; * background: blue;

Note:

IE can recognize *, but standard browsers (such as FF) cannot recognize *;

IE6 can recognize *, but cannot recognize it! Important;

IE7 can recognize * and can also recognize! Important;

FF cannot recognize *, but can recognize it! Important;

No matter what method, the order of writing is Firefox's preface, IE7 is in the middle, and IE6 is written at the end.