AngularJs IE Compatibility 兼容老版本IE

程序员文章站 2022-06-20 11:49:43

internet explorer compatibility 一、总括　　这文章描述internet explorer（ie）处理自定义html属性、标签的特性（可...

internet explorer compatibility

一、总括

　　这文章描述internet explorer（ie）处理自定义html属性、标签的特性（可以理解为“特别糟糕的性质”）。如果我们打算让应用兼容ie8以及以下的版本，那么可以继续往下看。

二、short version（简述）

　　为了让我们的angular应用在ie上工作，请确保：

　　1. 按需引入json.stringify（ie7或以下的都需要这玩意）。我们可以使用json2（https://github.com/douglascrockford/json-js）或者json3（http://bestiejs.github.com/json3/）。

　　2. 不要使用自定义标签，诸如<ng:view>（用属性版代替，如<div ng-view>）。如果还是想使用，则请看第3点。

　　3. 如果你确实想使用自定义标签，那么你必须做以下步骤，让老ie认识你的自定义标签。

<html xmlns:ng="http://angularjs.org">
<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>

需要关注的是：

xmls:ng - 命名空间 - 对于每一个我们计划使用的自定义标签，都需要有一个命名空间。

document.createelement(“自定义标签名称”) - 自定义标签名称的创建 - 因为这是旧版ie一个问题，我们需要通过ie判断注释（）来特殊处理。对于每一个没有命名空间或者非html默认标签，都需要进行这种预定义，以让ie不会犯傻（例如没样式…）。

三、long version（详情）

　　ie对于非标准html标签的处理会有问题。这大致可以氛围两类（有、无命名空间），每一类都有他自己的一个解决方式。

如果标签名称以”my:”开头的话，将被当作命名空间，必须要一个想对应的命名空间定义（<html xmlns:my=”ignored”>）。

如果标签没有命名空间（xx:开头），但并非一个标准的html的话，需要通过document.createelement(“标签名称”)进行声明。

如果我们打算对自定义标签定义样式的话，我们必须使用document.createelement(“标签名称”)来进行自定义，regardless of xml命名空间（实验证明，regardless of xml namespace意思很有可能是：不用管有命名空间的自定义标签）。

四、the good news（好消息）

　　好消息是，这个限制仅仅是对于元素名称的，对属性名称没影响。所以不需要对自定义属性（<div> my-tag your:tag></div>）做特殊处理。

五、what happens if i fail to do this？（没做这些处理的话，会发生什么事呢？！）

　　假设我们有一个非标准的html标签（对于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将会有3个孩子元素：

　　1. 一个自闭合的” mytag”，与<br/>类似。末尾的“/”是可选的，但<br>标签不允许有任何子元素，所以浏览器将其分为<br>、some text、</br>三个兄弟元素，而不是单独的<br>元素中含有some text元素。

　　2. 一个文本节点“some text”。这本来应该是mytag元素的子节点，不是它的兄弟节点。

　　3. 一个错误的自闭合标签” /mytag”，说它错误，是因为元素名称不允许含有”/”字符（在最后应该是允许的<br/>）。此外，闭合元素不应该是dom的一部分（不应该以元素形式出现），因为它只用作勾画dom结构的边界。

六、css styling of custom tag names（对自定义标签进行css样式定义）

　　如果想让css选择器对自定义元素有效，那么自定义元素必须通过document.createelement(“元素名称”)进行预定义，regardless of xml namespace（实验证明，这里是不用管有xml命名空间的？！）

　　这里是自定义标签样式定义的例子：

<!doctype html>
<html xmlns:ng="needed for ng: namespace">
<head>
  <title>ie compatbility</title>
  <!--[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;
      width:100px;
      height:100px;
    }

    ng-include {
      display: block;
      border: 1px solid blue;
      width:100px;
      height:100px;
    }
  </style>
</head>
<body>
  <ng:view></ng:view>
  <ng-include></ng-include>
</body>
</html>

上一篇：我像只蜜蜂

下一篇：兄弟，有女朋友了吗？

AngularJs IE Compatibility 兼容老版本IE

使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE