本页主要描述IE在处理自定义的HTML标签和属性上的一些特别做法。如果你打算让自己的程序支持IE8或之前的版本,请阅读本文。
你需要:
不要使用如<ng:view>
的自定义标签,改用<div ng-view>
如果你一定要使用自定义标签,你必须这么做:
<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>
重点在于:
xmlns:ng
- 命名空间 - 你必须为你打算使用的自定义标签的前缀,定义一个命名空间2. document.createElement(yourTagName)
- 创建自定义标签名 - 由于这只是某些旧版本的IE存在的问题,所以你必须使用条件语句<!--[if lte IE 8]>
这样的。对于每一个你使用的自定义标签,你都需要这样声明一下。
IE对于非标签的HTML标签不能正确地处理。具体情况分为两类,需要分别解决。
如果标签名以my:
开头,则它被看作为一个XML命名空间,需要用<html xmlns:my="ignored">
声明 如果标签中没有:
但它不是标准的HTML标签,是需要使用document.createElement('my-tag')
预定义一下 如果你想在自定义的标签上使用CSS选择器,则必须使用document.createElement('my-tag')
,不管有没有定义过XML命名空间
好消息是这些问题仅出现在标签名上,属性就没问题。所以对于<div my-tag your:tag></div>
则完全不需要特别处理。
假设你的HTML中有自定义的标签mytag
(或者my:tag
或者my-tag
):
<mytag>some text</mytag>
它将被会解析为下面的DOM:
+- HTML
+- BODY
+- mytag
+- #text: some text
预想的行为是BODY
下有mytag
,它有文本some test
但在IE是不是这样的(如果没有特别处理的话):
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /mytag
可以看到,BODY
元素下有三个子元素了:
一个自关闭的mytag
。它跟<br/>
的处理类似,最后的/
是可选的。由于<br>
不允许有子元素,所以<br>some text</br>
将被浏览器处理为三个相邻的元素,而不是<br>
下有一个文本元素2. 一个文本节点,跟mytag
是兄弟结点3. 一个无法处理的自关闭结点/mytag
。由于标签名中不允许有/
,所以它是无法处理的,它不会是DOM中的一部分。
不管有没有声明过XML命名空间,只要想对自定义标签使用CSS选择器选择,都需要使用document.createElement('my-tag')
进行声明。
<!--[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>
<ng:view></ng:view>
<ng-include></ng-include>
...