diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc index f634a2937ca4..7786b284de8c 100644 --- a/docs/content/guide/ie.ngdoc +++ b/docs/content/guide/ie.ngdoc @@ -6,205 +6,16 @@ # Internet Explorer Compatibility
-**Note:** AngularJS 1.3 is dropping support for IE8. Read more about it on +**Note:** AngularJS 1.3 has dropped support for IE8. Read more about it on [our blog](http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html). AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
-This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML -attributes and tags. Read this document if you are planning on deploying your Angular application -on IE8 or earlier. - The project currently supports and will attempt to fix bugs for IE9 and above. The continuous integration server runs all the tests against IE9, IE10, and IE11. See [Travis CI](https://travis-ci.org/angular/angular.js) and [ci.angularjs.org](http://ci.angularjs.org). We do not run tests on IE8 and below. A subset of the AngularJS functionality may work on these -browsers, but it is up to you to test and decide whether it works for your particular app. - - -## Short Version - -To make your Angular application work on IE please make sure that: - - 1. You polyfill JSON.stringify for IE7 and below. You can use - [JSON2](https://github.com/douglascrockford/JSON-js) or - [JSON3](http://bestiejs.github.com/json3/) polyfills for this. - - ```html - - - - - - - ... - - - ``` - - 2. add `id="ng-app"` to the root element in conjunction with `ng-app` attribute - - ```html - - - ... - - ``` - - 3. you **do not** use custom element tags such as `` (use the attribute version - `
` instead), or - - 4. if you **do use** custom element tags, then you must take these steps to make IE 8 and below happy: - - ```html - - - - - - - ... - - - ``` - 5. Use `ng-style` tags instead of `style="{{ someCss }}"`. The latter works in Chrome and Firefox - but does not work in Internet Explorer <= 11 (the most recent version at time of writing). - - -The **important** parts are: - - * `xmlns:ng` - *namespace* - you need one namespace for each custom tag you are planning on - using. - - * `document.createElement(yourTagName)` - *creation of custom tag names* - Since this is an - issue only for older version of IE you need to load it conditionally. For each tag which does - not have namespace and which is not defined in HTML you need to pre-declare it to make IE - happy. - - -## Long Version - -IE has issues with element tag names which are not standard HTML tag names. These fall into two -categories, and each category has its own fix. - - * If the tag name starts with `my:` prefix then it is considered an XML namespace and must - have corresponding namespace declaration on `` - - * If the tag has no `:` but it is not a standard HTML tag, then it must be pre-created using - `document.createElement('my-tag')` - - * If you are planning on styling the custom tag with CSS selectors, then it must be - pre-created using `document.createElement('my-tag')` regardless of XML namespace. - - -## The Good News - -The good news is that these restrictions only apply to element tag names, and not to element -attribute names. So this requires no special handling in IE: `
`. - - -## What happens if I fail to do this? - -Suppose you have HTML with unknown tag `mytag` (this could also be `my:tag` or `my-tag` with same -result): - -```html - - - some text - - -``` - -It should parse into the following DOM: - -``` -#document - +- HTML - +- BODY - +- mytag - +- #text: some text -``` - -The expected behavior is that the `BODY` element has a child element `mytag`, which in turn has -the text `some text`. - -But this is not what IE does (if the above fixes are not included): - -``` -#document - +- HTML - +- BODY - +- mytag - +- #text: some text - +- /mytag -``` - -In IE, the behavior is that the `BODY` element has three children: - - 1. A self closing `mytag`. Example of self closing tag is `
`. The trailing `/` is optional, - but the `
` tag is not allowed to have any children, and browsers consider `
some - text
` as three siblings not a `
` with `some text` as child. - - 2. A text node with `some text`. This should have been a child of `mytag` above, not a sibling. - - 3. A corrupt self closing `/mytag`. This is corrupt since element names are not allowed to have - the `/` character. Furthermore this closing element should not be part of the DOM since it is - only used to delineate the structure of the DOM. - - -## CSS Styling of Custom Tag Names - -To make CSS selectors work with custom elements, the custom element name must be pre-created with -`document.createElement('my-tag')` regardless of XML namespace. - -```html - - - - - - - - - ... - - -``` - - - +browsers, but it is up to you to test and decide whether it works for your particular app. \ No newline at end of file