Detailed analysis of differences between IE and FF by referencing js

Firefox firebug plug-in is recommended for js debugging tools.

Ability to set breakpoint execution for js

Ability to modify css styles during runtime

View dom Models

☆The internal bar of IE8 is also very good.

☆Open all js warnings in firefox:
Enter: about: config in the address bar
Double-click and set javascriptoptionrestict to true. Many warnings are displayed, which is conducive to error correction.

☆Ie-> firefoxjavascript class

△Document. all ("id")-> document. getElementById ("id ")
And the control should be identified by id instead of name.

Tip:
If the control only has name and no id, when getElementById is used:
IE: You can also find the object
FF: NULL is returned.

△Method for obtaining an element in form
ElForm. elements ['name'];

△When getting the set element, ie supports two writing methods: [] and (), but ff only supports [], for example:
Table. rows (5). cells (0)
Changed:
Table. rows [5]. cells [0]

△ The method for determining whether an object is an object should be
If (typeof object variable = "object ")
Instead of if (object variable = "[object]")

△Eval (Object Name)-> document. getElementById
FF supports eval Functions

△ Directly call the object through id
Object id. value = ""
Change
Document. getElementById ("name"). value = ""

△Obj. insertAdjacentElement ("beforeBegin", objText );

Change to use
Obj. parentNode. insertBefore (objText, obj );

The createElement of △ff does not support HTML code.

Use document. write (esHTML );

You can also set attributes after creating an element. For the input element, you need to set the type before adding it to the dom.
Varobj = createElement ("input ");
Obj. type = "checkbox ";

Varobj2 = document. getElementById ("id2 ");
Obj2.parentNode. insertBefore (obj, obj2 );

If you insert html code directly, you can use
CreateContextualFragment

△Innertext-> textContent

△ $ In the object name cannot be recognized. We recommend that you change it _
ObjName = "t1 $ spin"
Change
ObjName = "t1_spin"

In △ff, Attribute is set to an object and then retrieved. At this time, all attributes of the object are lost?
ObjText. setAttribute ("obj", obj );

Alert (obj. id) // correct name
Obj = objText. getAttribute ("obj ");
Alert (obj. id) // null

There is no problem in IE. For setAttribute of FF, the 2nd parameters are string type !!!
Therefore, if 2nd parameters are objects, the toString () method of the object is called.

The solution is to use the following call method:
ObjText. dropdown_select = obj;
Obj = objText. dropdown_select

△Classname-> class
Use class in FF to replace className in IE
Because class is a keyword, you need to use setAttribute/getAttribute.
SetAttribute ("class", "css style name ");

△ The attributes defined in html must use getAttribute.
<Tdid = "TD1" isOBJ = "true">

When obtaining:
Document. getElementByID ("TD1"). isOBJ returns undefined, which is acceptable in IE.

Use:
Document. getElementByID ("TD1"). getAttribute ("isOBJ ")

In △ff, the select control is no longer: always displayed at the top
Therefore, you may need to set the zIndex of the control.
To overwrite the select Control in IE, use ifame

△ The values below if (vars = undefined) are used to judge whether they are equivalent.
Undefined
Null
False
0

△ If FF calls obj. focus (); an error is reported, change it:
Window. setTimeout (function () {obj. focus () ;}, 20 );

△Ff, keyCode is read-only. What should I do if I convert the carriage return to the tab? What should I do if I convert the key value during input ??

The work und is:
1. Press enter to jump-> write your own jump processing code.
Traverse all the elements in the dom, find the next element of the current element that can set the focus, and set the focus for it.

2. In the control that can be entered,
Replace the selected part with the newly entered content: vartext = String. fromCharCode (event. keyCode );
At the same time, it blocks the upload of key events and calls: event. preventDefault ()

△ <Button> will be interpreted by firefox as submitting a form or refreshing the page ???
Standard <buttontype = "button">
Or in onclick = "original function call (); returnfalse ;"

△ In firefox, does document. onfocus fail to get the actual focus control?
Why does document. keydown work?

△Children-> childNodes

△Sytle. pixelHeight-> style. height

△Determine whether a function or variable exists
If (! ("VarName" inwindow) varVarName = 1;

△Document. body. clientWidth

<! DOCTYPEhtmlPUBLIC "-// W3C // DTDXHTML1.0Transitional // EN">

If html contains the preceding statement, use the following method to obtain
Document.doc umentElement. clientWidth

△Window. createPopup

FF not supported

△Document. body. onresize

FF not supported

Use window. onresize

Note: The onresize event is not triggered when the page is opened? It must be called once in onload.

△Box model Problems

In IE, content-box is set to uniform by default. Available settings:

Div, td {-moz-box-sizing: border-box; margin: 0; padding: 0 ;}

You can also add the following content to the document header:

<! DOCTYPEhtmlPUBLIC "-// W3C // DTDXHTML1.0Strict //" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

However, it has a great impact on the old IE code.

△ Registration event

IE: attachEvent

FF: addEventListener ("blur", myBlur, false );

"On" is not required for the event names with 1st Parameters"

The first parameter "false" indicates that the event is transmitted from the event object along the dom tree to the body.

△ Trigger event

IE: obj. fireEvent ("onclick ");

FF:

Vare = document. createEvent ("Events ");

E. initEvent ("click", true, false );

Element. dispatchEvent (event)

△ Get the object handle in the event processing function

VaroThis = this;

Obj. onfocus = function (evt ){

OThis. doOnFocus (evt );

}

△ Unified event processing framework code

DoOnFocus (evt ){

Evt = evt | window. event;

Varelease evt.tar get | evt. srcElement;

// Subsequent processing

}

△Ff does not support onpropertychange events

However, the setter method of attributes can be defined in FF, as shown below:

HTMLElement. prototype. _ defineSetter _ ("readOnly", function (readOnly ){

// Construct a virtual event object

Varevt = [];

Evt ["target"] = this;

Evt ["propertyName"] = 'readonly'

// The onpropertychange function must define the evt parameter. For details, refer to the unified event processing framework code.

If (this. onpropertychange) this. onpropertychange (evt );

});

☆Ie-> firefoxcss class

△Cursor: hand-> cursor: pointer

△Expressionfirefox does not support

Expression also consumes a lot of CPU in IE, so it should not be used !!

To achieve better results, you should create your own expressiontojavascript processing function.

In this way, both IE and FF can be used.

△Filterfirefox does not support

Filter: Alpha (Opacity = 50 );

Replace

-Moz-opacity: 0.5;

△Text-overflow

Not Supported

△Transparent

Obj. setAttribute ("bgColor", "# ffffff") in firefox only supports colors.

You must use obj. style. backgroundColor = "transparent ".

The height of the text control in △ff is different from that in IE.

Input [type = text] {

Height: 20px;

}

Note that there must be no space between input and!

△ Font cannot work on the body and td in IE, FF can

Unified use of font-family