Internet Explorer Compatibility
1. Summary
This article describes the characteristics of Internet Explorer (IE) handling custom HTML attributes and tags (which can be understood as "specially bad properties"). If we plan to make the application compatible with IE8 and below, we can continue to read.
2. Short Version (Brief description)
To get our angular app to work on IE, make sure:
1. Introduce JSON.stringify as needed (IE7 or below requires this thing). 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 attribute versions, such as <div ng-view>). If you still want to use it, please see point 3.
3. If you really want to use custom tags, you must do the following steps to let old IE know your custom tags.
<html xmlns:ng="http://angularjs.org"><head><!--[if lte IE 8]><script> document.createElement('ng-include'); document.createElement('ng-pluralize'); document.createElement('ng-view'); // Optionally these for CSS document.createElement('ng:include'); document.createElement('ng:pluralize'); document.createElement('ng:view');</script><![endif]--></head><body> ...</body></html>What needs attention is:
xmls:ng - Namespace - For every custom tag we plan to use, there needs to be a namespace.
document.createElement("custom tag name") - Creation of custom tag name - Because this is a problem with the old IE version, we need to handle it specially through IE judgment comments (<!--[if lte IE 8]>…<![endif]-->). For every tag without namespace or non-HTML default, this kind of predefined is required so that IE won't be stupid (e.g. no style...).
3. Long Version (Details)
IE has problems with handling non-standard HTML tags. This can roughly have two types of atmosphere (with and without namespaces), and each category has its own solution.
If the tag name starts with "my:", it will be regarded as the namespace, and a corresponding namespace definition must be defined (<html xmlns:my="ignored">).
If the tag has no namespace (starting with xx:) but is not a standard HTML, it needs to be declared through document.createElement ("tag name").
If we plan to define styles for custom tags, we must use document.createElement ("tag name") to customize it, regardless of XML namespace (experimentally proves that the meaning of relative of XML namespace is very likely: no need to care about custom tags with namespace).
4. The Good News
The good news is that this restriction is only for element names and has no effect on attribute names. Therefore, there is no need to do special processing for custom properties (<div> my-tag your:tag></div>).
5. What happens if I fail to do this? (What will happen if you don’t do these treatments?!)
Suppose we have a non-standard HTML tag (the same result is for my:tag or my-tag. But after testing, we found that the namespace method will not have such annoyance).
<html> <body> <mytag>some text</mytag> </body></html>
Generally speaking, it will be converted to the following DOM structure:
#document +- HTML +- BODY +- mytag +- #text: some text
What we expect is that the BODY element has a mytag child element, and the mytag has a text child element "some text".
But IE does not do this (if corrective measures are taken, it will not be included)!
#document +- HTML +- BODY +- mytag +- #text: some text +- /mytag
In IE, BODY will have 3 child elements:
1. A self-closed "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 three sibling elements, instead of the individual <br> elements containing some text elements.
2. A text node "some text". This should have been a child of the mytag element, not its sibling node.
3. An incorrect self-closing tag "/mytag" says it is wrong because the element name does not allow the "/" character (it should be allowed at the end<br/>). Furthermore, the closed element should not be part of the DOM (it should not appear in element form) as it is used only as a boundary to outline the DOM structure.
6. CSS Styleing of Custom Tag Names (CSS style definition for custom tags)
If you want the CSS selector to be valid for custom elements, then the custom elements must be predefined through document.createElement ("element name"), regardless of XML namespace (experimentally proves that there is no need to worry about XML namespace here?!)
Here is an example of custom tag style definition:
<!DOCTYPE html><html xmlns:ng="needed for ng: namespace"><head> <title>IE Compatibility</title> <!--[if lte IE 8]> <script> // needed to make ng-include parse properly document.createElement('ng-include'); // needed to enable CSS reference document.createElement('ng:view');// Comment out is OK? ! </script> <![endif]--> <style> ng/:view { display: block; border: 1px solid red; width:100px; height:100px; } ng-include { display: block; border: 1px solid blue; width:100px; height:100px; } </style></head><body> <ng:view></ng:view> <ng-include></ng-include></body></html>