Summary of JavaScript compatibility issues (which may easily lead to different browsers and are not noticeable)

1. img src refresh
[Analysis description] first look at the Code:

Src = "aa.jpg" style = "cursor: Pointer"/>
In IE, this code can be used to refresh the image, but not in Firefox. It is mainly about caching.
[Compatible processing] Add a random number after the address to solve the problem:

+ Math. Random () "src =" a.jpg "style =" cursor: Pointer "/>

2. nodename and tagname Problems
In Firefox, all nodes have a nodename value, but textnode does not have a tagname value.
In IE, nodename may be used.
Solution:
Use tagname, but check whether it is empty.

3. layout problems
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, after a div ends, it must be followed by a div. Do not press ENTER or

Space. Otherwise there may be problems, such as 3px deviation, and this cause is hard to find.
I encountered this problem when I joined multiple IMG labels and defined float: left. I hope these images can be connected. However, the results are normal in Firefox, and each IMG displayed in IE is separated.

3px. 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 la S, which can be considered comprehensively during layout and CSS design. However, table is the most effective and simple solution to compatibility problems, the table has a good performance in terms of compatibility.

4. padding and margin
Do not abbreviated padding and margin values. I have read one or two articles recently, but I have never met them.
Incompatible, just in case, try not to be abbreviated.

5. Obtain the keyboard Value
[Analysis description] IE and Firefox use different methods to obtain the keyboard value. The event. Which in Firefox is equivalent to event. keycode in IE. For details about the differences between the keycode, which, and

Charcode compatibility test
[Compatible processing]

Function mykeypress (EVT ){
// Compatible with IE and Firefox to obtain keyboardevent objects
EVT = (EVT )? EVT: (window. Event )? Window. Event :"")
// Compatible with IE and Firefox to obtain the key value of the keyboardevent object
Var key = EVT. keycode? EVT. keycode: EVT. Which;
If (EVT. ctrlkey & (Key = 13 | key = 10 )){
// Press Ctrl and enter at the same time
// Do something;
}
}

6. Firefox cannot support innertext
[Analysis description] Firefox does not support innertext. It supports textcontent to implement innertext. However, textcontent does not consider the display method of elements like innertext, so it is not completely compatible with IE. If not

Textcontent, which can be replaced by innerhtml if the string does not contain HTML code. You can also use js to write a method for implementation. Refer to the article "Implementing innertext attributes for Firefox.
[Compatibility processing] compatibility by determining the browser type:

If (document. All ){
Document. getelementbyid ('element'). innertext = "My text ";
} Else {
Document. getelementbyid ('element'). textcontent = "My text ";
}

7. Access and set class attributes
[Analysis description] Because the class is reserved for Javascript, the two browsers use different Javascript methods to obtain this attribute.
For all IE versions earlier than ie8.0:
Myobject. getattribute ("classname ");
Ie8.0 and Firefox:
Myobject. getattribute ("class ");
In addition, when setattribute () is used to set the class attribute, the two browsers also have the same difference.
Setattribute ("classname", value );
This method applies to all IE versions earlier than ie8.0. Note: ie8.0 does not support the "classname" attribute.
Setattribute ("class", value); applicable to ie8.0 and Firefox.
[Compatible processing]
Method 1 and both are written as follows:

VaR myobject = Document. getelementbyid ("Header ");
Myobject. setattribute ("class", "classvalue ");
Myobject. setattribute ("classname", "classvalue ");
// Set the class of the header to classvalue
Method 2: Both IE and FF support object. classname, so you can write as follows:

Myobject. classname = "classvalue ";
Method 3: first determine the browser type, and then use the corresponding method based on the browser type.