注:AngularJS1.3已经不支持IE8(包括IE8)以下的浏览器。更多信息请查看 我们的Blog 。AngularJS 1.2将继续支持IE8,但核心团队不会花时间去解决IE8或更早的IE浏览器问题。
本文是介绍针对IE浏览器的特征来处理HTML属性和标签。如果你想在IE8或者更早的浏览器的应用中使用AngularJS的话,这篇文章非常适合你。
该项目目前支持IE9+了,并会修复相应的BUG。持续集成服务器在IE9,IE10,和IE11运行所有的测试请看 Travis CI 和 ci.angularjs.org 。
我们没有在IE8及以下浏览器上测试。用AngularJS功能的子集可以工作在这些浏览器,但它是由你来测试和决定是否适用于您的特定的APP。
简单版本
为了能让您的AngularJS应用能正常运行在IE上,请确保如下:
1,你需要为IE7及以下浏览器添加JSON.stringify方法。可以使用 JSON2 或 JSON3。
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<!--[if lte IE 7]>
<script src="/path/to/json2.js"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>
2,给根元素添加id=”ng-app”属性与ng-app属性结合起来。
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
...
</html
3,不要使用自定义元素标签,比如<ng:view>,使用<div ng-view>来取代。
4,如果你想使用自定义元素标签,你必须在IE8及以下浏览器中添加下面的代码:
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<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>
5,使用ng-style标签来取代style=”{{someCSS}}”。后者能运行在chrome和Firefox,但在IE11及以下浏览器中无法运行(写作时的最新版本)。
最重要的部分:
- xmlns:ng-命名空间-你需要为你所有计划要使用的常见标签创建命名空间。
- document.createElement(yourTagName) -创建自定义的标签名称-因为这个问题只在IE老版本浏览器中存在,所以你只需要有条件的加载它。对于那些不支持命名空间和自定义HTML标签的浏览器,你需要预处理来让它在IE中正常的运行。
长版本
IE中不支持非标准标签的问题,可以分为两种,每种都有相应的解决办法
如果标签名以my:前缀开头,它会被认为是一个XML命名空间,所以必须在<html xmlns:my=”ignored”>进行相应的命名空间声明。
如果标签没有:,但它不是一个标准的HTML标签,那么它必须使用document.createElement(‘my-tag’)预先创建。
如果你计划在自定义标签中使用CSS选择器,那么无论哪个xml命名空间,你必须使用 document . createElement ( ‘my-tag’ ) 来预创建标签
好消息
好消息是,这些限制只适用于元素标记名称,而不是元素的属性名称。因此 <div my-tag your:tag ></div> 在IE中是不需要进行特殊处理的。
如果我不这样做,会发生什么?
如果你的HTML有未知的标签mytag(可能是my:tag或者my-tag类似的)
<html>
<body>
<mytag>some text</mytag>
</body>
</html>
它被解析成下面的DOM结构:
#document
+- HTML
+- BODY
+- mytag
+-#text: some text
我们想要的是BODY元素下有一个子元素mytag,mytag里面包含some text文本。 但在IE中不会解析成上面的样子(如果没有进行上面的修复的行为的话)
#document
+- HTML
+- BODY
+- mytag
+-#text: some text
+-/mytag
在IE中,body元素中有三个子元素:
1,自闭标签。比如自闭标签<br/>,标签中/是可选的,但<br>标签不允许有子元素,所以浏览器会认为是三个兄弟元素,而不是把some text作为<br>的子元素。
2,作为some text的文本节点。应该作为mytag的子元素,而不是兄弟元素。
3,损坏的自闭合标签/mytag。它是不规范的,因为元素名称不允许有/字符。此外,该自闭合标签不应该成为DOM的一部分,因为它仅用于绘制DOM的结构。
自定义标签中的CSS样式
为了能使CSS选择器能在自定义元素中工作,无论在XML命名空间,你必须使用 document . createElement ( ‘my-tag’ ) 来预创建自定义标签名
<html xmlns:ng="needed for ng: namespace">
<head>
<!--[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');
</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>
源引:https://docs.angularjs.org/guide/ie