0

这是 CSS ，我希望背景图片不在 IE 中显示。相反，我只想显示背景颜色。我怎么做？

html, body {    
  margin:0;
  padding: 0;    
  background: #a9ac41;
  background-image: url("background.png");    
  background-repeat: no-repeat;
  background-size: cover;    
  margin:0;
  padding: 0;     
}
4

8 回答 8

4

我猜这里的问题是background-size。IE8 和更早的版本不支持它，所以你看到你的图像在 IE8 中被弄乱了，你想通过恢复为纯背景来解决它。

首先，我应该告诉您，background-sizeIE9 及更高版本都支持该功能，因此您无需对所有 IE 版本进行全面更改。您只需要真正处理 IE8 和更早版本中缺乏支持的问题。

以下是一些供您选择的选项：

  • 纯 CSS 解决方案：
    您可以利用 CSS 处理未知属性的方式为不支持的浏览器提供纯 CSS 回退，方法background-size是将大小指定为速记background样式中的参数：

    background: #a9ac41;
background: url("bgimage.png") cover;

    IE8 将完全忽略第二个background，因为不理解cover. 其他浏览器会忽略第一个，因为第二个会覆盖它。问题已解决：所有浏览器都有工作背景。

  • 功能检测解决方案：
    您可以使用Modernizr之类的工具来测试浏览器是否支持background-size，然后使用 Javascript 相应地更改页面（例如，如果支持/不支持，则加载不同的样式表）。

  • filter解决方法：
    虽然IE8不支持background-size，但是可以使用该-ms-filter属性来模拟它，并取得了一定程度的成功。你会使用这样的代码：

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

    示例取自 MDN

  • Polyfill 解决方案：
    有一些可用的“polyfill”脚本将一些缺少的 CSS 功能实现到旧 IE 版本中，包括background-size. 在这种情况下，我推荐的是CSS3Pie。background-size按照 css3pie 网站上的说明，即使在非常旧的 IE 版本中，您也可以使用标准。

希望有帮助。

于 2013-05-20T10:15:21.243 回答
2

使用conditional声明。

<!--[if IE]>
Place IE specific content.
<![endif]-->

如果特定于版本，您可以像这样混合代码 -

<!--[if lt IE 8]>
Place content for IE lower than 8
<![endif]-->

创建了一个粗略的测试代码，并在 IE 9 中检查 -

<!--[if gte IE 8]>
<style>
html, body {       
  background: #a9ac41;
  background-image: url("http://dummyimage.com/600x400/000/fff.png");    
  background-repeat: no-repeat;
  background-size: cover;    
  margin:0;
  padding: 0;     
}
</style>
<![endif]--> 

<html>
<body>
<body>
</body>
</html>

编辑

条件语句不适用于 IE10，因此您可以通过media queries.

示例线程 - https://gist.github.com/atk/4025104

于 2013-05-20T08:23:21.873 回答
1

条件样式表是您所需要的。通过使用下面的代码，您可以设置仅在 IE 中使用的样式表，您可以在其中为正文设置替代样式。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
于 2013-05-20T08:24:09.627 回答
1

html为此替换您的 HTML 标记：

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

然后在CSS中：

    html,body{      
      margin:0;
      padding: 0;

      background-image: url("background.png");

      background-repeat: no-repeat;
      background-size: cover; 

      margin:0;
      padding: 0;     
    }

html.lt-ie9,html.lt-ie9 body{
      background: #a9ac41;
      background-image: none;
}

注意：IE10 不支持条件注释，此方法适用于 < IE9。

于 2013-05-20T08:31:49.690 回答
0

根据您要定位的 IE 版本，您可以使用条件注释（和/或仅 IE 样式表）：

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

请注意，这在 IE10 中不起作用。

于 2013-05-20T08:24:18.117 回答
0

有很多不同的方法可以做到这一点，这实际上取决于您对页面所做的其他操作。一种简单的方法是<head>标记中的以下 HTML。

<!--[if IE]><style>html,body{ background-image: none; }</style><![endif]-->

于 2013-05-20T08:24:40.333 回答
0

显然有多种方法可以回答这个问题，一些好的方法已经提到过。这是我最常使用的另一种方法，它需要更少的字节：

要仅针对 Internet Explorer，请在要针对 IE 的代码前面放置一个“*”。使用上面的示例，为了不出现在 IE 中，请使用 *，如下所示：

    html, body {    
    margin:0;
    padding: 0;    
    background: #a9ac41;
   *background-image: none;  
    background-image: url("background.png");    
    background-repeat: no-repeat;
    background-size: cover;    
    margin:0;

如果并且当它不起作用时，您的规则可能会发生冲突。在这种情况下，请使用“！important”，如下所示：

    *background-image: none !important;
于 2013-07-05T02:17:27.473 回答
0

将此代码复制并粘贴到您的 html 中。

   <!--[if IE]>
    <stye>
      html, body {    
        background-image: none; 
      }
    </style>
   <![endif]-->
于 2013-05-20T08:33:09.613 回答