ANGULARJS IE compatibility compatible old version Ie_angularjs

Internet Explorer Compatibility

First, the overall

This article describes Internet Explorer (IE) processing custom HTML attributes, tag attributes (which can be understood as "exceptionally bad"). If we are going to make the application compatible with IE8 and the following version, then you can continue to look down.

Second, short Version (brief)

To allow our angular applications to work on IE, make sure that:

1. The introduction of Json.stringify (IE7 or below) is required. We can use JSON2 (HTTPS://GITHUB.COM/DOUGLASCROCKFORD/JSON-JS) or JSON3 (http://bestiejs.github.com/json3/).

2. Do not use custom tags, such as <ng:view> (replace with the property version, such as <div ng-view>). If you still want to use it, see the 3rd.

3. If you really want to use a custom label, then you have to do the following steps to get old IE to know your custom tags.

To be concerned:

Xmls:ng-namespaces-For each custom label we plan to use, we need a namespace.

Document.createelement ("Custom label name")-Custom tag name creation-Because this is an old version of IE a problem, we need to use IE to judge comments (<!--[if LTE IE 8]>...<! [endif]-->) for special treatment. For each namespace-free or non-HTML default label, this is required to make IE not stupid (for example, no style ...). ）。

Three, Long Version (Details)

IE has problems with nonstandard HTML tags. This can be roughly the atmosphere of two types (have, no namespace), each class has his own one solution.

If the label name starts with "my:", it will be treated as a namespace, and you must have a namespace definition (

If the label does not have a namespace (xx: Beginning), but is not a standard HTML, it needs to be declared by document.createelement ("tag name").

If we are going to define a style for a custom label, we must use Document.createelement ("tag name") to customize it, regardless of XML namespaces (experimentally proven, regardless of XML The namespace meaning is likely to be: without having to have a custom label with namespaces.

Four, the good news (good News)

The good news is that this restriction is only for element names and has no effect on property names. Therefore, custom attributes (<div> my-tag your:tag></div>) do not need to be treated specifically.

V. What happens if I fail to doing this? (What happens if you don't do this?!) ）

Let's say we have a non-standard HTML tag (the same result for My:tag or My-tag). But after the test, it was found that the namespace approach would not have this annoyance.

In general, it will be converted to a DOM structure:

#document
  +-HTML
    +-body
      +-mytag
        +-#text: some text

What we expect is that the BODY element has a mytag child element, and MyTag has a text child element "some text".

But IE does not do so (if corrective action is done, it is not included)!

#document
  +-HTML
    +-body
       +-mytag
       +-#text: Some text
       +-/mytag

In IE, the body will have 3 children elements:

1. A self-closing "MyTag", similar to <br/>. The end of the "/" is optional, but the <br> tag does not allow any child elements, so the browser divides it into <br>, some text, </br> three sibling elements, rather than a separate <br> element containing some The text element.

2. A text node "some text". This would have been a child of the MyTag element, not its sibling node.

3. An incorrect self-closing label "/mytag" is said to be wrong because the element name is not allowed to contain "/" characters (at the end should be allowed <br/>). In addition, a closed element should not be part of the DOM (should not appear as an element) because it is used only as a boundary for outlining a DOM structure.

Vi. CSS styling of custom tag Names (CSS style definition for custom tags)

If you want the CSS selector to be valid for a custom element, the custom element must be predefined by document.createelement ("element name"), regardless of XML namespace (experimentally proven, There is no XML namespace here?! ）

Here is an example of custom label style definitions:

 <! DOCTYPE html>