Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 0c4f9fa

Browse files
madskonradsenpetebacondarwin
madskonradsen
authored and
petebacondarwin
committed
docs(ie): remove fixes needed for IE8 since we don't support it now
Closes #10330 Closes #10316
1 parent 7ad6652 commit 0c4f9fa

File tree

1 file changed

+5
-184
lines changed

1 file changed

+5
-184
lines changed

‎docs/content/guide/ie.ngdoc

+5-184
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
# Internet Explorer Compatibility
77

88
<div class="alert alert-warning">
9-
**Note:** AngularJS 1.3 is dropping support for IE8. Read more about it on
9+
**Note:** AngularJS 1.3 has dropped support for IE8. Read more about it on
1010
[our blog](http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html).
1111
AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time
1212
addressing issues specific to IE8 or earlier.
1313
</div>
1414

1515
This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML
1616
attributes and tags. Read this document if you are planning on deploying your Angular application
17-
on IE8 or earlier.
17+
on IE.
1818

1919
The project currently supports and will attempt to fix bugs for IE9 and above. The continuous
2020
integration server runs all the tests against IE9, IE10, and IE11. See
@@ -25,186 +25,7 @@ We do not run tests on IE8 and below. A subset of the AngularJS functionality ma
2525
browsers, but it is up to you to test and decide whether it works for your particular app.
2626

2727

28-
## Short Version
29-
30-
To make your Angular application work on IE please make sure that:
31-
32-
1. You polyfill JSON.stringify for IE7 and below. You can use
33-
[JSON2](https://github.com/douglascrockford/JSON-js) or
34-
[JSON3](http://bestiejs.github.com/json3/) polyfills for this.
35-
36-
```html
37-
<!doctype html>
38-
<html xmlns:ng="http://angularjs.org">
39-
<head>
40-
<!--[if lte IE 7]>
41-
<script src="/path/to/json2.js"></script>
42-
<![endif]-->
43-
</head>
44-
<body>
45-
...
46-
</body>
47-
</html>
48-
```
49-
50-
2. add `id="ng-app"` to the root element in conjunction with `ng-app` attribute
51-
52-
```html
53-
<!doctype html>
54-
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
55-
...
56-
</html>
57-
```
58-
59-
3. you **do not** use custom element tags such as `<ng:view>` (use the attribute version
60-
`<div ng-view>` instead), or
61-
62-
4. if you **do use** custom element tags, then you must take these steps to make IE 8 and below happy:
63-
64-
```html
65-
<!doctype html>
66-
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
67-
<head>
68-
<!--[if lte IE 8]>
69-
<script>
70-
document.createElement('ng-include');
71-
document.createElement('ng-pluralize');
72-
document.createElement('ng-view');
73-
74-
// Optionally these for CSS
75-
document.createElement('ng:include');
76-
document.createElement('ng:pluralize');
77-
document.createElement('ng:view');
78-
</script>
79-
<![endif]-->
80-
</head>
81-
<body>
82-
...
83-
</body>
84-
</html>
85-
```
86-
5. Use `ng-style` tags instead of `style="{{ someCss }}"`. The latter works in Chrome and Firefox
87-
but does not work in Internet Explorer <= 11 (the most recent version at time of writing).
88-
89-
90-
The **important** parts are:
91-
92-
* `xmlns:ng` - *namespace* - you need one namespace for each custom tag you are planning on
93-
using.
94-
95-
* `document.createElement(yourTagName)` - *creation of custom tag names* - Since this is an
96-
issue only for older version of IE you need to load it conditionally. For each tag which does
97-
not have namespace and which is not defined in HTML you need to pre-declare it to make IE
98-
happy.
99-
100-
101-
## Long Version
102-
103-
IE has issues with element tag names which are not standard HTML tag names. These fall into two
104-
categories, and each category has its own fix.
105-
106-
* If the tag name starts with `my:` prefix then it is considered an XML namespace and must
107-
have corresponding namespace declaration on `<html xmlns:my="ignored">`
108-
109-
* If the tag has no `:` but it is not a standard HTML tag, then it must be pre-created using
110-
`document.createElement('my-tag')`
111-
112-
* If you are planning on styling the custom tag with CSS selectors, then it must be
113-
pre-created using `document.createElement('my-tag')` regardless of XML namespace.
114-
115-
116-
## The Good News
117-
118-
The good news is that these restrictions only apply to element tag names, and not to element
119-
attribute names. So this requires no special handling in IE: `<div my-tag your:tag></div>`.
120-
121-
122-
## What happens if I fail to do this?
123-
124-
Suppose you have HTML with unknown tag `mytag` (this could also be `my:tag` or `my-tag` with same
125-
result):
126-
127-
```html
128-
<html>
129-
<body>
130-
<mytag>some text</mytag>
131-
</body>
132-
</html>
133-
```
134-
135-
It should parse into the following DOM:
136-
137-
```
138-
#document
139-
+- HTML
140-
+- BODY
141-
+- mytag
142-
+- #text: some text
143-
```
144-
145-
The expected behavior is that the `BODY` element has a child element `mytag`, which in turn has
146-
the text `some text`.
147-
148-
But this is not what IE does (if the above fixes are not included):
149-
150-
```
151-
#document
152-
+- HTML
153-
+- BODY
154-
+- mytag
155-
+- #text: some text
156-
+- /mytag
157-
```
158-
159-
In IE, the behavior is that the `BODY` element has three children:
160-
161-
1. A self closing `mytag`. Example of self closing tag is `<br/>`. The trailing `/` is optional,
162-
but the `<br>` tag is not allowed to have any children, and browsers consider `<br>some
163-
text</br>` as three siblings not a `<br>` with `some text` as child.
164-
165-
2. A text node with `some text`. This should have been a child of `mytag` above, not a sibling.
166-
167-
3. A corrupt self closing `/mytag`. This is corrupt since element names are not allowed to have
168-
the `/` character. Furthermore this closing element should not be part of the DOM since it is
169-
only used to delineate the structure of the DOM.
170-
171-
172-
## CSS Styling of Custom Tag Names
173-
174-
To make CSS selectors work with custom elements, the custom element name must be pre-created with
175-
`document.createElement('my-tag')` regardless of XML namespace.
176-
177-
```html
178-
<html xmlns:ng="needed for ng: namespace">
179-
<head>
180-
<!--[if lte IE 8]>
181-
<script>
182-
// needed to make ng-include parse properly
183-
document.createElement('ng-include');
184-
185-
// needed to enable CSS reference
186-
document.createElement('ng:view');
187-
</script>
188-
<![endif]-->
189-
<style>
190-
ng\:view {
191-
display: block;
192-
border: 1px solid red;
193-
}
194-
195-
ng-include {
196-
display: block;
197-
border: 1px solid blue;
198-
}
199-
</style>
200-
</head>
201-
<body>
202-
<ng:view></ng:view>
203-
<ng-include></ng-include>
204-
...
205-
</body>
206-
</html>
207-
```
208-
209-
28+
To ensure your Angular application works on IE please consider:
21029

30+
1. Use `ng-style` tags instead of `style="{{ someCss }}"`. The latter works in Chrome and Firefox
31+
but does not work in Internet Explorer <= 11 (the most recent version at time of writing).

0 commit comments

Comments
 (0)