Question

我有一个奇怪的问题，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个不同的住宿来渲染元素。

Answer 1

如果你正在使用MVC，那么绝对路径可能是一个问题，这听起来像是在发生的事情。（尝试在Chrome或FF中提取您的开发人员工具，并在执行页面重新加载时检查控制台，看看您是否在图片GET请求上获得了404）

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

Answer 2

好的，在对样式表做了一些浮躁之后，我设法让两者一起玩。我最终做的是保留前面提到的所有行的评论 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及更早版本的用户使用它，但它只是增加了劳动力以试图保持死马。： - ）

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

2 个答案: