IE8在导入CSS时不会渲染背景图像

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

由于IE8存在的问题以及它缺乏对许多CSS3元素的支持，我不得不使用条件逻辑为我的网站内容加载特定的样式表。我使用的是MVC4，我的_布局页面的标题中有以下内容：

<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]--> 

在my site.css中，我为相同的ID标签提供了类似的代码：

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

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

当我启动网站时，主页会反映相应的图像，并按预期呈现所有内容

当我导航到位于主目录之外的另一个页面时，我的问题就出现了（如果这确实对问题有任何影响的话）

该页面具有以下内嵌代码：

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

在弃用的.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;

这两个样式表似乎混淆了浏览器或其他东西

如有任何解释，将不胜感激

---

目前，我正在考虑干脆取消对IE8的任何支持，因为尝试创建两种不同的调节来渲染元素会变得太麻烦。

如果您使用MVC，可能是绝对路径的问题，这听起来像是正在发生的事情。（尝试在Chrome或FF中启动开发工具，并在重新加载页面时查看控制台，查看是否在image get请求中获得404）

---

您可以尝试类似于

。/../Images/orange\u spotlights3.jpg的方法，其中每个
。/
都是一个文件夹级别。您还可以考虑使用类似于
@Url.Content（“/images/orange\u spotlight3.jpg”）
的助手，或者一起尝试绝对路径
 好吧，在对样式表进行了一些错误处理之后，我设法让这两个样式表一起使用。我最后做的是保留了前面提到的所有行的注释
Chrome样式表，不透明度除外：.60

因此，我的样式表将用于支持除IE8之外的所有其他浏览器，现在如下所示：

#spotlight {
 background:url('/Images/orange_spotlights3.jpg'); 
 background-repeat:no-repeat;
 opacity:.60; 
 width:100px;
}

IE8的另一个样式表保持原样，两个页面根据其指定的样式表适当地呈现图像

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

显然，以下属性在IE8中不能很好地工作，并且可能会导致问题：

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

我已经用Firefox、Chrome和IE8测试过了。我还没有看到其他浏览器是否存在问题，但我想这应该也适用于Safari

我仍然没有解释为什么这些元素影响IE8浏览器，而它们显然不存在于指定的样式表中

在这个站点的下一个版本中，我肯定会完全放弃对IE8的支持。虽然我很想让IE 8及更早版本的用户可以使用它，但这只是增加了努力维持现状的工作量。：-）
 谢谢Devin，不幸的是，我在发帖之前已经考虑并尝试过了，但这并没有带来什么不同。我要强调的一点是，在Chrome浏览器的样式表中注释掉过滤器和不透明度属性可以缓解这个问题，两种浏览器都会渲染图像；所以我怀疑这会消除人们对这是一个路径相关问题的怀疑，因为这些属性也与实际路径无关。啊，没错。我想你可能已经试过了，因为听起来你对这门学科很精通。奇怪的回到绘图板上！
-khtml-opacity:.60; 
-moz-opacity:.60; 
-ms-filter:"alpha(opacity=80)";
 filter:alpha(opacity=80);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);