AngularJS 1.3 abandons support for IE8, but AngularJS 1.2 will continue to support IE8, but the core team no longer intends to spend time solving problems in IE8 and previous versions. This document introduces the characteristics of Internet browsers (IE) when handling custom HTML tags and attributes. If you are planning to deploy Angular applications on IE8 or earlier browsers, please read this article.
The project currently supports and will try to fix bugs above IE9. Continuous integration server runs all tests on IE9, IE10 and IE11. Details of participating in Travis CI and.
We do not run tests on IE8 and previous browsers. Some subsets of AngularJS functions may work on these browsers, but it will be up to you to test and decide whether it works on your particular application.
Short version
To ensure that Angular applications work in IE, please confirm:
1. Polyfill on IE7 or earlier. You can use JSON2 or JSON3 to polyfills.
<!doctype html>
<html xmlns:ng="">
<head>
<!--[if lte IE 7]>
<script src="/path/to/"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>
2. Add to the root element at the connection, use the ng-app attribute
<!doctype html>
<html xmlns:ng="" ng-app="optionalModuleName">
...
</html>
3. You cannot use custom element tags, such as <ng:view> (using the attribute version <div ng-view> instead), or
4. If you have to use custom elements, then you must take the following steps to ensure that both IE8 and previous versions can be used:
<!doctype html>
<html xmlns:ng="" ng-app="optionalModuleName">
<head>
<!--[if lte IE 8]>
<script>
('ng-include');
('ng-pluralize');
('ng-view');
// Optionally these for CSS
('ng:include');
('ng:pluralize');
('ng:view');
</script>
<![endif]-->
</head>
<body>
...
</body>
</html>
5. Use the ng-style tag instead of style="{{ someCss }}". Subsequent versions can work under Chrome and Firefox but not under IE version <=11 (the latest version at the time of writing).
The important part is:
xmlns:ng- Namespace - You need to specify a namespace for each custom tag.
(yourTagName) - Create a custom tag name - Because this is only a problem with older versions of IE, you need to specify the loading conditions. For every tag that has no namespace and is not defined in HTML, you need to declare it in advance for IE to recognize it.
Version information
IE has many problems with non-standard label elements. These problems can be classified into two categories, each with its own solution.
- If the tag name starts with my: then it will be treated as an XML namespace and must have a corresponding namespace declaration <html xmlns:my="ignored">
- If the tag does not have: symbols but is not a standard HTML tag, it must be created in advance with ('my-tag').
- I If you plan to change the style of custom tags with CSS selector, you have to create them in advance with ('my-tag') regardless of whether there is a namespace or not.
Good news
The good news is that these restrictions only apply to element tag names and not element attribute names. Therefore, special treatment is not required in IE: <div my-tag your:tag></div>
What happens if I don't?
If you use the HTML unknown tag mytag (my:tag or my-tag result is the same):
<html>
<body>
<mytag>some text</mytag>
</body>
</html>
The following DOM should be parsed:
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
The expected behavior is that the BODY element has a mytag child element, which carries some text.
But this is not the case in IE (if the above revision is not included)
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /mytag
In IE, the BODY element has three child elements:
- 1. A self-closed mytag. For example, self-closing tag<br/>. / is optional, but the <br> tag does not allow child elements. The browser regards <br>some text</br> as a tag of three peers, and some text is not a child element of <br>.
- 2. A text node some text. This should be a child element of mytag, not a peer tag
- 3. A damaged self-closed/mytag. This is a broken element because element names are not allowed to have / characters. In addition, this sub-closed element is not part of the DOM, it is only used to describe the structure of the DOM.
CSS style custom tag naming
To ensure that the CSS selector works on custom elements, the name of the custom element must be created with ('my-tag') in advance without worrying about the XML namespace.
<html xmlns:ng="needed for ng: namespace">
<head>
<!--[if lte IE 8]>
<script>
// It is necessary to confirm that ng-include is parsed normally
('ng-include');
// Requires CSS reference to enable
('ng:view');
</script>
<![endif]-->
<style>
ng\:view {
display: block;
border: 1px solid red;
}
ng-include {
display: block;
border: 1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng-include></ng-include>
...
</body>
</html>
Reprinted from: /2014/7-3/