Freewind @ Thoughtworks scala java javascript dart 工具 编程实践 月结 math python english [comments admin] [feed]

(2013-01-01) 08. IE浏览器的兼容性

广告: 云梯:翻墙vpn (省10元) 土行孙:科研用户翻墙http proxy (有优惠)

概览

本页主要描述IE在处理自定义的HTML标签和属性上的一些特别做法。如果你打算让自己的程序支持IE8或之前的版本,请阅读本文。

长话短说

你需要:

  1. 不要使用如<ng:view>的自定义标签,改用<div ng-view>

  2. 如果你一定要使用自定义标签,你必须这么做:

    <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>
    

    重点在于:

  3. xmlns:ng - 命名空间 - 你必须为你打算使用的自定义标签的前缀,定义一个命名空间2. document.createElement(yourTagName) - 创建自定义标签名 - 由于这只是某些旧版本的IE存在的问题,所以你必须使用条件语句<!--[if lte IE 8]> 这样的。对于每一个你使用的自定义标签,你都需要这样声明一下。

    长话长说

    IE对于非标签的HTML标签不能正确地处理。具体情况分为两类,需要分别解决。

  4. 如果标签名以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:

    document

    +- HTML

     +- BODY
        +- mytag
           +- #text: some text
    

    预想的行为是BODY下有mytag,它有文本some test

    但在IE是不是这样的(如果没有特别处理的话):

    document

    +- HTML

     +- BODY
        +- mytag
        +- #text: some text
        +- /mytag
    

    可以看到,BODY元素下有三个子元素了:

  5. 一个自关闭的mytag。它跟<br/>的处理类似,最后的/是可选的。由于<br>不允许有子元素,所以<br>some text</br>将被浏览器处理为三个相邻的元素,而不是<br>下有一个文本元素2. 一个文本节点,跟mytag是兄弟结点3. 一个无法处理的自关闭结点/mytag。由于标签名中不允许有/,所以它是无法处理的,它不会是DOM中的一部分。

    自定义标签的CSS

    不管有没有声明过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>
    ...
    


comments powered by Disqus