背景图像显示在Firefox和Chrome中，但不是IE9

Question

我有一个标题在后台有一个图像，它没有出现在IE9中。它适用于Chrome，Firefox和Safari。标题中打开的徽标文件显示正常。

HTML：

<div class="myheader">
  <img src="img/logo.png"><h5 class="your-on">You are on: Login Page</h5>
</div>

CSS：

.myheader {
    height: 90px;
    /* background-color: #3D8F43; */
    padding: 5px;
    position: relative;
    border-radius: 10px;
    -moz-border-radius:10px;
    background-image: url("../img/header-bg.jpg");
}

另外，我只是在本地打开这些文件，无论我想用什么浏览器打开它。这是一个演示，我需要向不同的人发送电子邮件，让他们打开它并查看HTML文件，这样我就需要它在本地工作。

我已经在IE中的设置中启用了混合内容，但它没有用。

更新 - 应该首先包含此内容。当我第一次打开页面时，IE表明它已限制网页运行脚本或ActiveX控件。我允许它执行此操作并刷新页面，但结果相同，没有图像。

Answer 1

试试这个：

.myheader {
    height: 90px;
    /* background-color: #3D8F43; */
    padding: 5px;
    position: relative;
    border-radius: 10px;
    -moz-border-radius:10px;
    background: url(../img/header-bg.jpg) no-repeat 0 0;
}

取出背景图像上的引号以及“-image”。看看它是否适合你;）

另外，指定课程中的图像。所以尝试添加：

.myheader img { /* === Specify what your inner image/logo would be --- */
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

HTML：

<div class="myheader">
  <img src="img/logo.png" alt="" title="" /><h5 class="your-on">You are on: Login Page</h5>
</div>

Answer 2

我不确定为什么会发生这种情况。所以我摆弄它，这里是代码（它与你的相同，只有图像是我从互联网上获得的一些图像）：

HTML：

<div class="myheader">
    <img src="https://www.key.com/kco/images/logo.png"/>
    <h5 class="your-on">You are on: Login Page</h5>
</div>

<强> CSS：

.myheader {
    height: 90px;
    /* background-color: #3D8F43; */
    padding: 5px;
    position: relative;
    border-radius: 10px;
    -moz-border-radius:10px;
    background-image: url("https://www.key.com/kco/images/bg_nav-rht.png");
}

屏幕截图如下所示：

徽标是包含keybank字符串的徽标，背景是红色和灰色的徽标。

这是小提琴：http://jsfiddle.net/pLkbV/2/

我已经在IE 9和10上测试了它并且它完美无缺。

因此，您的情况的一个可能原因可能是图片未被加载来自您在后台网址中提供的路径。