css - IE8 在导入 CSS 时不会渲染背景图片

Question

我有一个奇怪的问题，即 IE8 似乎没有使用导入的 CSS 渲染我的背景图像。

由于 IE8 的问题及其不支持许多 CSS3 元素，我不得不使用条件逻辑为我的网站内容加载特定的样式表。我正在使用 MVC4 并且我的 _Layout 页面在 header 中包含以下内容:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
      <link href="@Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" />
    <![endif]-->  
    <!--[if gt IE 8]>
      <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .gradient {
                filter:none;
            }
        </style>
    <![endif]--> 

在我的 deprecated.css 文件中有以下内容:

#main {
 background:url('/Images/iecollage.png'); 
  background-repeat:no-repeat;
  width:100px;
}

在我的 site.css 中，我有相同 ID 标记的可比较代码:

#main {
  background:url('/Images/collage.png'); 
  background-repeat:no-repeat;
  background-size:920px;
  width:100px;
}

我不得不使用 2 个不同大小的图像和属性定义来纠正浏览器解释标记的方式。我正在比较使用 IE8 和 Chrome 的结果。

当我启动该网站时，主页会反射(reflect)相应的适当图像并按预期呈现所有内容。

当我导航到位于主目录之外的另一个页面时，我的问题就出现了(如果这真的对问题有任何影响)。

该页面具有以下内联代码:

<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;">

在我的 Site.css 文件中，我的 ID 样式如下:

#spotlight {
  background:url('/Images/orange_spotlights3.jpg'); 
  background-repeat:no-repeat;
 -khtml-opacity:.60; 
 -moz-opacity:.60; 
 -ms-filter:"alpha(opacity=80)";
  filter:alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
  opacity:.60; 
  width:100px;
}

在 Deprecated.css 中，样式是:

#spotlight {
     background:url('/Images/orange_spotlights3.jpg') no-repeat;
}

在 Chrome 中，样式从导入的样式表中加载。但是在 IE8 中，我得到了一个空白区域，该区域应该加载图像。

我注意到的古怪行为是，如果我要从 Site.css 文件中删除以下行，那么 Chrome 和 IE8 都会呈现图像，但我在 Chrome 中失去了透明效果，这并不是为了分离不同样式表的 ID。

  -ms-filter:"alpha(opacity=80)";
  filter:alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
  opacity:.60;

好像这 2 个样式表混淆了浏览器之类的东西。

任何解释将不胜感激。

就目前而言，我正在考虑完全取消对 IE8 的任何支持，因为尝试创建 2 种不同的住宿来呈现元素太麻烦了。

Answer 1

如果您使用的是 MVC，则绝对路径可能存在问题，这听起来像是正在发生的事情。 (尝试在 Chrome 或 FF 中启动您的开发人员工具，并在重新加载页面时检查控制台，看看您是否在图像 GET 请求中收到 404)

您可以尝试像 ../../Images/orange_spotlights3.jpg 这样的东西，其中每个 ../ 都是一个文件夹级别。您还可以考虑使用像 @Url.Content("/images/orange_spotlight3.jpg") 这样的助手，或者一起尝试绝对路径。