The compatibility problem and solution of IE and Firefox are as follows:

The compatibility problem and solution of IE and Firefox are as follows:

To help you read the code, replace Internet Explorer with IE and Mozzila Firefox with MF/FF:

1. // window. event
IE: window. event object
FF: There is no window. event object.
You can pass the event object to the function parameters. For example, onmousemove = doMouseMove (event)
Solution: var event = event | window. event; example:

<script>function test(event) {var event = event || window.event;//do Something}</script><input type="button" value="click" onclick="test(event)"/>

2. // current mouse Coordinate
IE: event. x and event. y.
FF: event. pageX and event. pageY.
Generic: both have the event. clientX and event. clientY attributes.

// The current coordinates of the mouse (plus the scroll bar rolling distance)
IE: event. offsetX and event. offsetY.
FF: event. layerX and event. layerY.

Solution example:

<Script> function test (event) {var event = event | window. event; // or var event = event? Event: window. event; // either of these can be used, or use if else (abbreviated) var x = event. offsetX | event. layerX; var y = event. offsetY | event. layerY; // do Something} </script> <div onmousedown = "test (event)"> </div>

3. // event. srcElement
Note: In IE, the event object has the srcElement attribute but does not have the target attribute. In Firefox, the even object has the target attribute,
But there is no srcElement attribute.
Solution: Use obj (obj = event. srcElement? Event. srcElement: event.tar get ;)
To replace the event. srcElement or
Event.tar get under firefox. pay attention to the event compatibility.

 

4. // event. toElement
In IE, the even object has the srcElement attribute, but does not have the target attribute;
The even object in Firefox has the target attribute, but does not have the srcElement attribute.
Solution:
Var target = e. relatedTarget | e. toElement;

 

5. // coordinates of x and y of the tag: style. posLeft and style. posTop
IE: Yes.
FF: No.
Generic: object. offsetLeft and object. offsetTop.

 

6. // form height and width
IE: document. body. offsetWidth and document. body. offsetHeight. Note: The page must have a body tag.
FF: window. innerWidth and window. innerHegiht,
And document.documentelement.clientwidthand document.doc umentElement. clientHeight.
Generic: document. body. clientWidth and document. body. clientHeight.

 

7. // Add events
IE: element. attachEvent ("onclick", function );.
FF: element. addEventListener ("click", function, true ).
Usage: element. onclick = function. Although onclick events can all be used, the effects of onclick and the above two methods are different,
Onclick only executes one process, while attachEvent and addEventListener execute one process list, that is, multiple processes.
For example, element. attachEvent ("onclick", func1 );
Element. attachEvent ("onclick", func2) will be executed in both func1 and func2.

 

8. // tag Custom Attributes
IE: If you define an attribute value for the label div1, you can obtain this value using div1.value and div1 ["value.
FF: div1.value and div1 ["value"] cannot be used.
General purpose: div1.getAttribute ("value ").

 

9. // document. form. item
IE: an existing problem: many statements such as document. formName. item ("itemName") exist in the existing code and cannot be run in MF.
FF/IE: document. formName. elements ["elementName"]

 

10. // collection/array objects
(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]

 

11. // question about the id of the HTML object as the object name
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.
Solution: Use getElementById ("idName") instead of idName as the object variable.

 

12. // the problem of getting an object using the idName string

In IE, eval (idName) can be used to obtain the HTML object with id as idName, which cannot be used in MF.
Solution: Use getElementById (idName) instead of eval (idName ).

 

13. // The variable name is the same as the id of an HTML Object
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.
Solution: When declaring variables, add var to avoid ambiguity, so that it can run normally in IE. In addition, it is best not to use the same variable name as the HTML Object id to reduce errors.

14. // document. getElementsByName () and document. all [name]
Existing Problem: 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 ).

 

15. // document. all
Firefox is compatible with document. all, but generates a warning. You can use getElementById ("*")
Or getElementByTagName ("*"). However, attributes such as document. all. length are completely incompatible.

 

16. // question about the input. type attribute
Description: The input. type attribute in IE is read-only, but the input. type attribute in Firefox is read/write.

 

17. // window. location. href
Note: in IE or Firefox2.0.x, you can use window. location or window. location. href; In Firefox1.5.x,
Only window. location can be used
Solution: Use window. location to replace window. location. href.

 

18. // modal and non-modal window Problems
Note: in IE, you can use showModalDialog and showModelessDialog to open modal and non-modal windows. 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.
For example, var parWin = window. opener; parWin.doc ument. getElementById ("Aqing"). value = "Aqing ";

 

19. // body
The body of Firefox exists before the body tag is fully read by the browser. The body of IE must exist only after the body tag is fully loaded by the browser.

 

20. // event Delegate Method
IE: document. body. onload = inject; // Function inject () has been implemented before this
FF: document. body. onload = inject ();

 

21. // difference between firefox and IE parent Element
IE: obj. parentElement
FF: obj. parentNode
Solution: because both FF and IE support DOM, using obj. parentNode is a good choice.

 

22,// InnerText works normally in IE, but innerText does not work in FireFox.

TextContent required

// When setting the style of the HTML Tag in FireFox, all the positional and font size values must be followed by px. This ie is also supported.

 

23. // parent node, child node, and delete node
IE: parentElement, parement. children, element. romoveNode (true ).
FF: parentNode, parentNode. childNodes, node. parentNode. removeChild (node ).

24. // perform operations on the select options set
Apart from [], SelectName. options. item () is also acceptable for enumeration elements. In addition, SelectName. options. length,
SelectName. options. add/remove can be used in both browsers.
Note that the element is assigned after the add operation. Otherwise, the Operation will fail.
Dynamically delete all options in the select statement:
Document. getElementById ("ddlResourceType"). options. length = 0;
Dynamically delete an option in the select statement:
Document. getElementById ("ddlResourceType"). options. remove (indx );
Dynamically Add the option in the select statement:
Document. getElementById ("ddlResourceType"). options. add (new Option (text, value ));
General methods for ie ff dynamic deletion:
Document. getElementById ("ddlResourceType"). options [indx] = null;

 

25. // capture events
Problems:
FF has no setCapture () or releaseCapture () Methods
Solution in IE:
Obj. setCapture ();
Obj. releaseCapture ();
Solution in FF Firefox:

Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP); window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP); if (! Window. captureEvents) {o. setCapture ();} else {window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP);} if (! Window. captureEvents) {o. releaseCapture ();} else {window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP );}

26. // prohibit the selection of webpage content

FF is forbidden by CSS, whereas IE is forbidden by JS.
Solution:
IE: obj. onselectstart = function () {return false ;}
FF:-moz-user-select: none;

27. // drawing
IE: VML
FF: SVG