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

Question

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

Microsoft Edge它显示如下：

我的代码非常简单：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="card">
  <img class="staff_pic alignnone size-medium wp-image-4306" src="http://www.carleyconsult.com/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>

＆＃13;

＆＃13;

＆＃13;

非常感谢任何帮助。

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>元素以查找 并将其删除。这不是一个理想的解决方案，但我无法想到一个更好的解决方案。至少它是一个寻找另一个！