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('

Modified:

var iframe = (document. all) ? document.createElement('

iframe.name = "iframe";

5. OuterHTML and innerText of DOM objects , outerText attribute

【Standard Reference】

outerHTML was originally a private property implemented by IE browser. For details, please refer to MSDN description: outerHTML Property.

This attribute has also been newly added to the W3C's HTML5 specification draft, which describes the element itself and its content. When you set this property on a DOM element with a string, the string is rendered as HTML code and replaces the DOM element.

Currently, among mainstream browsers, only Firefox does not support the outerHTML attribute.

【Problem description】

Firefox does not support the outerHTML, innerText, and outerText attributes of DOM objects

【Impact】

Using outerHTML, innerText, and outerText attributes in Firefox will cause the script program to report an error.

【Solution】

None at the moment, please avoid using it as much as possible.

6. IE6 IE7 IE8 Opera supports the 'click' method of other elements except INPUT and BUTTON elements

[Standard Reference]

The "click" method is used to simulate a mouse click event and can be applied to the "type" attribute On the INPUT element whose value is "button" "checkbox" "radio" "reset" "submit", the "click" method specification of other elements is not mentioned.

【Problem Description】

IE6 IE7 IE8 Opera supports the "click" method of other elements except INPUT and BUTTON elements, which makes each browser support the "click" of other elements except INPUT and BUTTON elements. has a difference.

【Impact】

Due to differences in browser support for the "click" method of other elements except INPUT and BUTTON elements, the "click" method of other elements except INPUT and BUTTON elements will be simulated. Functions triggered by mouse clicks do not respond in some browsers.

[Solution]

It is recommended to avoid simulating mouse click events through the "click" method on other elements except INPUT and BUTTON elements.

If you need to use the "click" method on its element to trigger the "onClick" event handler, you can solve it in the following two ways:

* Since in most cases, calling the "click" method is nothing more than executing a certain element The bound event handler function, so you can directly call the "click" event handler corresponding to the element.

* Or use the "createEvent" "initEvent" and "dispatchEvent" methods in the relevant definitions of the DocumentEvent interface, Event interface and Event registration interfaces in the DOM-Level-2-Events standard to create a "click" event and dispatch it. For example:

function createEvent (eventTarget,eventName){

try{

if(eventTarget.dispatchEvent){

var evt = document.createEvent("MouseEvents");

evt.initEvent(eventName,false,true );

eventTarget.dispatchEvent(evt);

}else if(eventTarget.fireEvent){

eventTarget.fireEvent('on'+eventName);

}else{

eventTarget[ type ]();

}

}catch(e){

alert(e);

}

}

createEvent(HTMLElement,'click');

8. Compatibility summary of CSS hack

CSS hack refers to us In order to be compatible with various browsers, special css definition techniques are used. (Note: You should try not to use css hack unless you have to, because its forward compatibility is unknown. A good way is to learn web standard design well and carry out compatibility design from the ground up.) In the following table, I combined a lot of information and Practice using tables written in html code, which is convenient for expansion and updating, but it is difficult to display in the document, so it is divided into two screenshots:

First, let’s take a simple example of distinguishing IE browser from other browsers: color:red; ( Supported by all browsers) color:red9; (supported by IE) color:red