Front-end browser JavaScript and CSS compatibility summary

Summary of JavaScript and CSS compatibility of front-end browsers

1. getElementById

[Standard Reference]

getElementById is a method provided by the Document interface, used to obtain an element. The parameters passed in by this method should be those of the target element. The value of the id attribute. The id of the target element is a case-sensitive string, and the id should be unique within the document.

【Problem Description】

However, in IE6 IE7 IE8(Q), it is supported to obtain the A APPLET BUTTON FORM IFRAME IMG INPUT MAP META OBJECT EMBED SELECT TEXTAREA element whose name attribute value is elementName through document.getElementById(elementName). And the id is case-insensitive.

【Impact】

This problem will cause the target element to be unable to be obtained in non-IE browsers.

【Solution】

When using the document.getElementById method to obtain page elements, the id attribute value of the element should be passed in instead of the name attribute value of the element, and it is strictly case-sensitive. At the same time, please note that the id attribute value of an element in the page cannot be repeated with the name attribute value of other elements.

In addition, like getElementById, the standard getElementsByName is case-sensitive, but it is not case-sensitive under IE, so it is best to be strictly case-sensitive when we use it.

2. IE will ignore some whitespace characters when creating a DOM tree

[Standard Reference]

Node (node) includes not only element nodes, but also text nodes, comment nodes, attribute nodes, etc. The type of node can be Use nodeType to differentiate.

In HTML source code, text (including whitespace characters) located within and between tags will be created as text nodes.

【Problem Description】

IE will ignore some whitespace characters when creating the DOM tree, so it will create fewer text nodes than other browsers. On the other hand, for the same document, other browsers will create more text nodes than IE.

【Impact】

If user-designed scripts for IE use the nodeList, firstChild, lastChild, previousSibling or nextSibling methods of the node object, they may not be able to achieve the same purpose in other browsers due to this problem, such as script execution. An error occurred, or the operation was performed on the wrong target object.

【Solution】

1. Try to remove the blank characters between each label when it is not necessary.

Because page scripts mostly operate on "element nodes", so just make sure there are no text nodes between elements (that is, there are no blank characters between labels in the source code - including spaces, newlines, and tabs) , you can make the above properties behave consistently across browsers.

In addition, elements created using scripts and added sequentially are closely related to each other. There are no text nodes between elements, so there is no need to worry about the above compatibility issues in this case, such as:

2. Do type judgment when getting nodes.

When it is impossible to guarantee that there are no text nodes between elements, you need to add type judgment to the operation on the nodes.

In addition, in non-IE, you can also use previousElementSibling and nextElementSibling to get the element node, for example: use Element.nextElementSibling to get the next element node adjacent to the element Element.

3. Differences in onscroll events of document, document.body, and document.documentElement objects

[Standard Reference]

scroll event will be triggered when the document or an element is scrolled.

[Problem Description]

There are differences in the support of onscroll events of document, document.body, and document.documentElement objects among various browsers.

All browsers support the scroll events of window and ordinary DIV objects;

In IE and Opera , document and document.body objects support scroll events. Not supported in other browsers;

In IE, the document.documentElement object supports scroll events. Not supported in other browsers.

【Impact】

After binding onscroll events to document, document.body, and document.documentElement objects, the corresponding event handling functions may not be triggered as expected in different browsers.

【Solution】

When binding the scroll event (scroll) to the entire browser window, bind it to the window object.

4. Only the createElement method in IE supports passing in HTML String as parameter

[Standard Reference]

According to the description in the W3C DOM Level2 Core specification, the createElement method under the Document interface can create an element node object instance. It can pass in a string parameter tagName. In HTML, this parameter can be in any form and must be mapped to a compliant uppercase form that can be implemented by the DOM. That is, tagName should be a legal tag name. If illegal characters appear in tagName, an INVALID_CHARACTER_ERR exception should be thrown.

【Problem Description】

In IE6 IE7 IE8, the createElement method can not only create node objects through legal tag names, but also create node objects by passing in a legal HTML code string as a parameter.

【Cause impact】

If you use IE's unique method of creating a node object by passing in a legal HTML code string as a parameter to createElement, an exception will be thrown in other browsers and subsequent code will not be executed.

【Solution】

For general non-replaceable elements, the standard method of passing in the tag name to the createElement method in each browser is used in the W3C specification.

For some IE processing problems with replaced elements, pay attention to judge the browser. For IE, use its unique method of passing a legal HTML code string as a parameter to createElement. Non-IE browsers still use the W3C specification. Standard method, for example:

Incompatible code, only supported by IE:

Var iframe = document.createElement('