IE11在图像上方添加文字空白

Question

我在SharePoint 2016页面上获得了以下代码。

   <div class="tsd-hp-carousel-container">
      <div class="tsd-hp-carousel-slide">​<img src="/sites/sandbox/PublishingImages/slide1.png" alt=""/></div>
      <div class="tsd-hp-carousel-caption">This is a caption.</div>
   </div>

在Chrome和Edge中，结果是这样的：

在IE11中，结果是这样的：

图像已被下推17个像素，并与显示在正确位置的标题栏重叠。抱歉，字幕文本是蓝色的-我应该为此目的进行更改-但您可以将字幕覆盖在图像底部，然后在“字幕”中看到“ p”的下划线”。

我认为这可能是CSS问题，但首先我在浏览器看到的情况下检查了源，以查看SharePoint或IE是否存在任何实际间隔。IE显示的源为：

<div class="tsd-hp-carousel-container"><div class="tsd-hp-carousel-slide">​<img src="/sites/sandbox/PublishingImages/slide1.png" alt="" /></div><div class="tsd-hp-carousel-caption">This is a caption.</div></div>

但是请看一下DOM Explorer：

在img标签上方显示一条空行。当我单击该行并按Delete键时，该行将从DOM视图中消失，并且图像会移到正确的位置。

那为什么在代码中未显示的空白行处插入空白行，以及如何避免这种情况发生？

后续行动：

在控制台中，键入以下内容：

var xContainer = document.getElementsByClassName("tsd-hp-carousel-slide")[0];
var xChildren = xContainer.childNodes;
xChildren.length
  // 2 [so there IS more than just the img element here]
typeof xChildren[0]
  // "object"
JSON.stringify(xChildren[0]);
  // "{}"
  

出于任何原因，将空对象 插入父对象。知道这一点至少可以给我一个hack：我可以添加一个Javascript代码段来测试父对象是否有两个孩子，如果是，则可以删除第一个。不过，我还是想知道是否可以预先防止这种情况！