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

【问题标题】：Why aren't my images displaying in Microsoft Edge?为什么我的图像没有显示在 Microsoft Edge 中？
【发布时间】：2016-07-12 01:46:59
【问题描述】：

一位客户指出，通过 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>

任何帮助将不胜感激。

【问题讨论】：

更正了链接
在 Edge 中对我来说工作正常。如果这是在实时站点中，您可以发布网址吗？
carleyconsult.co.uk/about-us 是显然有问题的地址

标签： css microsoft-edge

【解决方案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>

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

【讨论】：

啊，这很有意义我有一个 jquery 脚本来查找所有 p 标签并放一个到倒数第二个单词，这样我就没有任何单词，禁用它并且它可以工作。