Front-end browser JavaScript and CSS compatibility summary

Front-end browser JavaScript and CSS compatibility summary

First, getElementById

"Standard Reference"

The getElementById is a method provided by the Document interface that gets an element in which the parameter passed in should be the value of the target element's ID property, 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), a APPLET BUTTON form IFRAME IM that gets the name attribute value ElementName is supported in document.getElementById (elementname) mode The G INPUT MAP META OBJECT EMBED the SELECT TEXTAREA element, and the ID is case insensitive.

"Impact"

This issue will cause the target element to not be acquired in non-IE browsers.

"Solutions"

When you use the document.getElementById method to get a page element, you should pass in the element's ID property value, not the element's Name property value, and be strictly case sensitive. Also note that the id attribute value of the element in the page cannot be duplicated with the Name property value of the other element.

In addition, as with getElementById, the standard getelementsbyname is case-sensitive, but it is not differentiated under IE, so it is best to use strict case sensitivity.

Second, IE ignores some whitespace characters when creating a DOM tree

"Standard Reference"

Node (node) includes not only element nodes, but also text nodes, annotation nodes, attribute nodes, and so on, and the types of nodes can be distinguished by using NodeType.

In the HTML source code, the text (including whitespace characters) that is inside the tag and between the labels is created as a text node.

"Problem description"

When you create a DOM tree, IE ignores some whitespace characters, so it creates fewer text nodes than other browsers. Conversely, in the same document, other browsers will create more text nodes than IE.

"Impact"

User-designed script for IE if you use the NodeList, FirstChild, LastChild, previoussibling, or nextSibling methods of the Node object, you may not be able to achieve the same purpose in other browsers because of this problem. If the script performs an error, or the wrong target object is manipulated.

"Solutions"

1, if not necessary, as far as possible to remove the white space between the tags.

Because most page scripts operate on "element nodes," the behavior of each of these attributes can be consistent across browsers by ensuring that there are no text nodes between the elements-that is, there are no whitespace characters between the tags in the source code-including spaces, line breaks, tabs, and so on.

In addition, using scripts to create and add elements sequentially, they are tightly linked, and there are no text nodes between the elements, so this situation does not have to worry about compatibility issues such as:

2. Make the type judgment when acquiring the node.

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

In addition, in non-IE, you can also use previouselementsibling and nextelementsibling to get element nodes, for example: Take element.nextelementsibling with element elements The adjacent next element node.

Iii. differences in onscroll events of document, Document.body and Document.documentelement objects

"Standard Reference"

The scroll event is triggered when a document or an element scrolls.

"Problem description"

Differences in support for onscroll events for document, Document.body, document.documentelement objects by browser

All browsers support scroll events for window and ordinary div objects;

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

In IE, the Document.documentelement object supports the scroll event. Not supported in other browsers.

"Impact"

After binding onscroll events for document, Document.body, Document.documentelement objects, the corresponding event handlers may not be triggered as expected in different browsers.

"Solutions"

Binds to the Window object when a scrolling event (scroll) is bound to the entire browser windows.

Iv. only the CreateElement method in IE supports incoming HTML String arguments

"Standard Reference"

The CreateElement method under the Document interface can create an element node object instance, according to the description in the Level2 Core specification. It can pass in a string parameter tagName, in HTML, this parameter can be any form and must be mapped to a canonical uppercase form that can be implemented by the DOM. That is, the tagName should be a valid label name. If an illegal character is present in the TagName, the Invalid_character_err exception should be thrown.

"Problem description"

In IE6 IE7 IE8, the CreateElement method can not only create a node object from a valid tag name, but also create a node object as a parameter by passing in a valid HTML code string.

"Impact"

If you use IE's method of creating a Node object as a parameter by passing in a valid HTML code string for createelement, an exception will be thrown in the other browser, causing subsequent code to fail to execute.

"Solutions"

For generic non-replacement elements, the standard in the CreateElement method is used in each browser to pass in tag names for the.

For some IE dealing with problematic replacement elements, then note that the browser, for IE, using its unique method of passing a valid HTML code string for createelement as a parameter, non-IE browsers still use the standard method of the specification, for example:

Incompatible code, IE only support:

Var iframe = document.createelement (' <iframe name= ' iframe > ')

After modification:

var iframe = (document.all)? Document.createelement (' <iframe name= ' iframe > '): Document.createelement (' iframe ');

Iframe.name = "iframe";

V. outerHTML, InnerText, Outertext properties of DOM objects

"Standard Reference"

outerHTML is originally a private attribute implemented by IE Browser, see the MSDN Note: outerHTML property for more information.

This attribute is also newly added to the HTML5 draft specification, which describes the element itself and its contents. When you set this property of a DOM element with a string, the string is rendered and replaced with the DOM element as HTML code.

Currently, only Firefox does not support the outerHTML property in mainstream browsers.

"Problem description"

Firefox does not support outerHTML, InnerText, Outertext properties for DOM objects

"Impact"

Using the outerHTML, InnerText, Outertext properties in Firefox will cause the script to error.

"Solutions"

No, should try to avoid the use.

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

"Standard Reference"

The "click" method is used to simulate a mouse click event that can be applied to the "type" attribute value of "button" "checkbox" "Radio" "Reset" "Submit" on the INPUT element, other elements of the "click" Method specification are not mentioned.

"Problem description"

IE6 IE7 IE8 Opera supports the "click" Method of elements other than input and button elements, which makes the browsers differ in support for the "click" of elements other than input and button elements.

"Impact"

Due to differences in the browser's support for the "click" Method of elements other than input and button elements, the function triggered by mouse clicks that are simulated by the "click" Method of elements other than input and the button element cannot be responded to in some browsers 。

"Solutions"

It is recommended that you try to avoid simulating mouse click events with elements other than INPUT and button elements through the "click" Method.

If you want to trigger an "OnClick" event handler on its elements using the "click" Method, you can resolve it in the following two ways:

* Because most of the time the "click" method is implemented by executing an event handler that is bound by an element, the "click" event handler corresponding to that element can be called directly.

* or use dom-level-2-events standard Documentevent interface, event interface, and event registration interfaces in the definition "CreateEvent "Initevent" and "dispatchevent" Methods establish "click" events and distribute them. Such as:

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 ');

Viii. compatibility summary of CSS hack

CSS hack is a special CSS definition technique that we use in order to be compatible with each browser. (Note: Not forced, should try not to use CSS hack, because its forward compatibility is unknown.) A good way is to learn the Web standard design and fundamentally carry out the compatibility design. The following table I am a combination of many data and practice in HTML code tables, easy to expand and update, but the document is not good display, so divided into two times:

First, a simple example of the difference between IE browser and other browsers: color:red; (All browsers support) color:red\9; (ie all support) color:red\0; (IE8 support) *color:red; (Ie6/ie7 support) *+color:red; (IE7 support) _color:red; (IE6 support)

Front-end browser JavaScript and CSS compatibility summary