IE：背景图像不显示。浏览器在悬停时重绘？答案

【问题标题】：IE: Background Image does not display. Browser repaints on hover?IE：背景图像不显示。浏览器在悬停时重绘？
【发布时间】：2014-10-30 15:26:00
【问题描述】：

所以这是我遇到的最奇怪的 IE 错误之一，它发生在 IE11 中！

我有一个简单的元素，如下所示：

<div class="article">
    <div class="wrapper">
        <header><h1>Hello World</h1></header>
        <div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'>&nbsp;</div>
    </div>
</div>

使用以下 CSS：

*{margin:0;padding:0;}

.article {
    height:200px;
    background:aliceblue;
}

.wrapper {
    height:100%;
    display:table;
    width:100%;
}

header, .image {
 display:table-row;
    width:100%;
}

header {
    background:red;
    height:10px;
}

.article:hover .image {
    opacity:0.5;
}

对于 JSFiddle click here（您可能需要单击运行才能看到错误出现）

问题是在启动页面时我们看不到背景图像。当您将鼠标悬停在.article 上时，图像会突然出现！悬停时图像仍然存在（如预期的那样）。

好像浏览器只在用户悬停时重新绘制背景图像？

图片在初始页面加载时不显示

图像在鼠标悬停时显示，之后图像将保留

我们如何默认显示背景图像？

小提琴>http://jsfiddle.net/ykrbe4zy/

【问题讨论】：

尝试将 style='background-image 更改为 style='background
检测用户是否在使用 Internet Explorer。如果是，请发送弹出窗口说不要。
@JamesKorden，我希望，我希望……
@JamesKorden: 让 Web 应用程序在所有浏览器上运行总是更好！对于像背景图片这样的小问题，您不想删除 IE 用户，这是一个小修复，请查看我的答案
我仍然认为我 100% 认真的评论是有效的。

标签： html css image internet-explorer

【解决方案1】：

图像的关键问题是您正在为 IE 似乎不正确支持的图像应用display: table-row;。

改用display: inline-block;：

.image{
    display: inline-block;
    height: 100%;
}

here's the working demo

【讨论】：

感谢您的快速回答，我现在将在我们更全面的生产环境中试用此解决方案，我会及时通知您。

【解决方案2】：

更改以下代码

来自：

header, .image {
    display: table-row;
    width: 100%;
}

header {
    background: red;
    height: 10px;
}

到

header, .image {
    display: block;
    width: 100%;
    height: 100%;
}

header {
    background: red;
    height: 40px;
}

更新小提琴：http://jsfiddle.net/ts8ahznd/7/

更新代码：

CSS

 * {
      margin: 0;
      padding: 0;
  }
  .article {
      height: 200px;
      background: aliceblue;
  }
  .wrapper {
      height: 100%;
      display: table;
      width: 100%;
  }
  header, .image {
      display: block;
      width: 100%;
      height: 100%;
  }
  header {
      background: red;
      height: 40px;
  }
  .article:hover .image {
      opacity: 0.5;
  }

HTML

<div class="article">
    <div class="wrapper">
        <header>
            <h1>Hello World</h1>
        </header>
        <div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'>&nbsp;</div>
    </div>
</div>

希望这会有所帮助！！！

【讨论】：

感谢您的详尽回答，我现在将对其进行测试（在我们非常缓慢的生产环境中）。
成功了，谢谢。我确实觉得@C-linkNepal 的回答更简洁，所以我给了他正确的答案。