IE：背景图像不显示。浏览器重新悬停？

Question

所以这是我遇到的最奇怪的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上时，图像会突然出现！当悬停图像时（正如预期的那样）。

就好像浏览器只在用户盘旋时重新绘制背景图像？

初始页面加载时图像不显示

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

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

小提琴＆gt; http://jsfiddle.net/ykrbe4zy/

Answer 1

更改以下代码

来自：

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

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

TO

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>

希望这会有所帮助!!!

Answer 2

图片的关键问题在于，您正在将display: table-row;应用于IE正常不支持的图片。

改为使用display: inline-block;：

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

here's the working demo