为什么我的图像没有显示在 Microsoft Edge 中？

Question

一位客户指出，通过 Microsoft Edge 查看时某些图像无法正常工作，但使用 Chrome、firefox 甚至旧版 IE 都能完美找到：

Microsoft Edge 显示如下：

我的代码很简单：

.card .staff_pic {
  width: 100%;
  height: 100%;
}
.card .linkedin-icon {
  margin-top: 10px;
}
.card {
  height: 100%;
  width: 20%;
  overflow: hidden;
  position: relative;
  float: left
}
.card_content {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
  width: 100%;
  height: 90%;
  position: absolute;
  bottom: -400px;
  transition: all .5s ease;
  color: #fff
}
.card_content h3 {
  font-size: 28px;
  margin-top: 1.5em;
  color: #fff;
  margin-bottom: 0px;
}
.card_content p {
  font-size: 18px;
  color: white;
}
.card:hover .card_content {
  background-color: rgba(151, 145, 59, 0.8);
  bottom: 30px;
}

<div class="card">
  <img class="staff_pic alignnone size-medium wp-image-4306" src="../wp-content/uploads/2014/10/David.png" alt="David" />
  <div class="card_content">
    <h3>David Durham</h3>
    Head of Bid Management &amp; Consultancy Services
    <a href="#" target="_blank">
      <img class="linkedin-icon alignnone size-full wp-image-4321" src="../wp-content/uploads/2014/10/linkedin.png" alt="linkedin" width="37" height="36" />
    </a>
  </div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

我检查了 Edge 中的元素，您的 <p> 和 <img> 元素呈现为：

<p>
    <img class="staff_pic alignnone size-medium wp-image-4310" alt="Jim" &nbsp;src="http://www.carleyconsult.co.uk/wp-content/uploads/2014/10/Jim.png">
</p>

请注意其中的  。这导致元件断裂。它在 Chrome 中正确呈现，所以我怀疑 Edge 正在做一些奇怪的事情。一种解决方法是运行一个 jQuery 脚本来搜索您的 <img> 元素以找到   并将其删除。这不是一个理想的解决方案，但我想不出更好的解决方案。至少在寻找另一个的时候是一个！

为什么我的图像没有显示在 Microsoft Edge 中？

Why aren't my images displaying in Microsoft Edge?

css

microsoft-edge