IE 11错误放置</img>；使用Cloudinary AngularJS指令在DOM中标记

我正在使用官方指令在我的网站上放置图像。然而，Chrome和IE 11在放置结束标记的位置上表现不同。IE将其放置在父元素关闭之前，Chrome将其正确放置在被转移的元素之后

以下是相关Cloudinary指令的片段（来自其官方插件）：

angularModule.directive（'clTransformation'，function（）{
返回{
限制：'E'，
排除：错误，
要求：“^clImage”，
链接：函数（范围、元素、属性、clImageCtrl）{
var属性={}；
$.each（属性、函数（名称、值）{
如果（名称[0]！=='$'）{
属性[cloudinaryAttr（名称）]=值；
}
});
clImageCtrl.addTransformation（属性）；
}
}
});
指令（'clImage'，函数（）{
返回{
限制：'E'，
替换：正确，
是的，
模板：“

但是，在IE中，DOM更新为：

...

...

这会导致所有的

，

，

，

，

标记无法呈现

---

我尝试更改

clImage

指令以使用像

这样的模板，但我得到了相同的结果。IE中的

标记发生了什么，我如何解决这个问题？

对于非链接转换，如您所示，将转换参数放在图像标记本身上应该可以做到这一点。在这种情况下：

<figure>
  <cl-image
    ng-repeat='image in images'
    public_id='{{image.public_id}}'
    format='jpg'>
      <cl-transformation
        height='{{imgHeight}}'
        width='{{imgWidth}}'
        crop='{{crop}}'>
  </cl-image>
  <a href='' ...></a>
  <a href='' ...'></a>
  <div class='nav'>
    <div class='wrapper'>
      <ul>
        <li>
          <a href='' ...></a>
        </li>
        ...
      </ul>
    </div>
  </div>
  <figcaption><{{description}}></figcaption>
</figure>

上面的示例在前面的裁剪变换的顶部链接了另一个45度的旋转

---

查看各种图像标记示例。

这是AngularJS的习惯用法吗？

永远不应该有结束标记。这也意味着

标记永远不能包含其他元素；如果有，你不能期望它在所有浏览器中都有相同的行为方式。（只是不要这样做。）@ps2goat：这里的关键是AngularJS似乎依赖于它来工作，这不是我第一次看到它尝试这么做。@BoltClock我知道。Cloudinary AngularJS模板和我自己的元素都不包含

。但是当我用浏览器的调试工具检查它们时，它们显示DOM具有

tag。这可能是与

<figure>
  <cl-image
    ng-repeat='image in images'
    public_id='{{image.public_id}}'
    format='jpg'>
      <cl-transformation
        height='{{imgHeight}}'
        width='{{imgWidth}}'
        crop='{{crop}}'>
  </cl-image>
  <a href='' ...></a>
  <a href='' ...'></a>
  <div class='nav'>
    <div class='wrapper'>
      <ul>
        <li>
          <a href='' ...></a>
        </li>
        ...
      </ul>
    </div>
  </div>
  <figcaption><{{description}}></figcaption>
</figure>

<figure>
  <img ng-transclude="" public_id="wide/image1" format="jpg" src="http://res.cloudinary.com/<account id>/image/upload/c_fill,h_370,w_1130/v1/wide/image1.jpg">
    <cl-transformation height="370" width="1130" crop="fill" class="ng-scope">
    </cl-transformation>
  </img>   <!---------------- img close tag is here ---------------------->
  <img ...>
    ...
  </img>
  <a href='' ...></a>
  <a href='' ...></a>
  ...
</figure>

<figure>
  <img ng-transclude="" public_id="wide/image1" format="jpg" src="http://res.cloudinary.com/<account id>/image/upload/a_exif,c_fill,g_center,h_370,w_1130/v1/wide/image1.jpg">
    <cl-transformation height="370" width="1130" crop="fill" class="ng-scope">
    </cl-transformation>
  <a href='' ...></a>
  <a href='' ...></a>
    <div class='nav'>
      <div class='wrapper'>
        <ul>
          <li>
            <a href='' ...></a>
          </li>
          ...
        </ul>
      </div>
    </div>
    <figcaption><{{description}}></figcaption>
  </img>   <!---------------- img close tag is here :( ---------------------->
  <img ...>
     ...
  </img>
</figure>

<cl-image
  ng-repeat='image in images'
  public_id='{{image.public_id}}'
  height='{{imgHeight}}'
  width='{{imgWidth}}'
  crop='{{crop}}'
  format='jpg'>

<cl-image
  ng-repeat='image in images'
  public_id='{{image.public_id}}'
  raw-transformation='c_crop,h_100,w_150/a_45'
  format='jpg'>