ANGULARJS Study notes--ie compatibility compatible old version IE

Source: Internet
Author: User
Tags tag name

Original address: http://docs.angularjs.org/guide/ie

Internet Explorer Compatibility

First, the overall

This article describes Internet Explorer (IE) handling custom HTML attributes, the attributes of tags (which can be understood as "particularly bad nature"). If we're going to make the app compatible with IE8 and the following versions, you can continue looking down.

Ii. Short Version (brief)

In order for our angular application to work on IE, make sure that:

1. Introduce json.stringify on demand (this is required for IE7 or below). 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> (in lieu of a property version, such as <div ng-view>). If you still want to use it, see 3rd.

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

Attention is paid to:

    • Xmls:ng-Namespaces-a namespace is required for each custom label that we plan to use.
    • Document.createelement ("Custom label name")-Custom label name creation-because this is a problem with the older version of IE, we need to judge the comment via IE (<!--[if LTE IE 8]>...<! [endif]-->) to special treatment. For each namespace or non-HTML default tag, this pre-definition is required to make IE not be silly (for example, no style ...). )。

Three, Long Version (Details)

IE has a problem with non-standard HTML tags. This can generally be an atmosphere of two classes (with or without namespaces), and each class has his own solution.

    • If the label name begins with "my:", it will be treated as a namespace and must have a namespace definition (
    • If the label does not have a namespace (xx: Start), 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 tag, we have to use Document.createelement ("tag name") to customize it, regardless of the XML namespace (experimental proof, regardless of XML The namespace means that there is a good chance of not having a custom label with a namespace.

Iv. The good News (good News)

The good news is that this restriction is only for the element name and has no effect on the property name. So there is no need for special handling of custom attributes (<div> My-tag your:tag></div>).

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

Suppose we have a nonstandard HTML tag (with the same result for My:tag or My-tag). However, after the test, you will find that the namespace method does not have this annoyance.

In general, the DOM structure will be converted to a bit:
 
  
#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 sub-element "some text".

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

#document &NBSP;&NBSP;&NBSP;&NBSP; +-HTML &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; +-BODY               +-mytag                +-  < Code class= "JavaScript preprocessor" > #text: some text                +-/mytag

Inside IE, the body will have 3 child elements:

1. A self-closing "MyTag", similar to <br/>. The "/" at the end 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 instead of a separate <br> element containing some The text element.

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

3. A false self-closing label "/mytag", which says it is wrong, is because the element name is not allowed to contain "/" characters (in the end should be allowed <br/>). In addition, the closed element should not be part of the DOM (should not appear as an element) because it is used only as a boundary to delineate the DOM structure.

VI. CSS styling of custom tag Names (CSS style definition for customized labels)

If you want the CSS selector to be valid for a custom element, then the custom element must be pre-defined by Document.createelement ("element name"), regardless of the XML namespace (the experiment proves that There is no need to have an XML namespace?! )

Here is an example of a custom label style definition:

<! DOCTYPE html>

ANGULARJS Study notes--ie compatibility compatible old version IE

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.