IE8 导入 CSS 时不会渲染背景图片答案

【问题标题】：IE8 will not render background-image when importing CSSIE8 导入 CSS 时不会渲染背景图片
【发布时间】：2014-05-17 05:05:10
【问题描述】：

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

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

<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 比较结果。

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

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

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

<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 个不同的适应来呈现元素会变得非常麻烦。

【问题讨论】：

标签： css google-chrome internet-explorer-8

【解决方案1】：

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

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

【讨论】：

谢谢德文，不幸的是我在发帖之前已经考虑过并尝试过，但并没有什么不同。我要强调的一件事是，在 Chrome 浏览器的样式表中注释掉 filter 和 opacity 属性可以缓解这个问题，并且两个浏览器都会呈现图像；所以我怀疑这会消除它与路径相关问题的怀疑，因为这些属性也与实际路径无关。
啊，真的。我想你可能已经尝试过了，因为你听起来很精通这个主题。奇怪的。回到绘图板！

【解决方案2】：

好的，在对样式表做了一些错误之后，我设法让两者一起发挥作用。我最终做的是保留前面提到的所有行的 cmets 除不透明度外的 Chrome 样式表：.60

所以我将用于支持除 IE8 之外的所有其他浏览器的样式表现在看起来像这样：

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

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

显然以下属性在 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 和更早版本的用户可以使用它，但它只是增加了试图保持死马状态的劳动力。 :-)

【讨论】：