我希望背景图片不显示在 IE 中。我怎么做？答案

【问题标题】：I want the background picture not to be displayed in the IE. How do I do that?我希望背景图片不显示在 IE 中。我怎么做？
【发布时间】：2013-07-05 10:17:27
【问题描述】：

这是 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;     
}

【问题讨论】：

您已经指定了两次 margin 和 padding。（这不会造成问题，但也无济于事）
真正的问题是“你想影响哪些 IE 版本，为什么？”如果你想对所有 IE 版本都这样做，那么我会反对它。如果您尝试解决 IE8 不支持background-size 的问题，那么可能有办法解决它。但无论哪种方式，答案都会根据您想要的 IE 版本而有所不同，因此请指定。

标签： html css internet-explorer background

【解决方案1】：

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

首先，我应该告诉你，background-size 在 IE9 及更高版本中受支持，所以你不需要对所有 IE 版本进行全面更改。您只需要真正解决 IE8 及更早版本中缺乏支持的问题。

这里有一些选项供您选择：

纯 CSS 解决方案：
您可以利用 CSS 处理未知属性的方式为不支持 background-size 的浏览器提供纯 CSS 回退，方法是将大小指定为简写 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')";
```
例如taken from MDN
Polyfill 解决方案：
有一些可用的“polyfill”脚本可以将一些缺少的 CSS 功能实现到旧 IE 版本中，包括background-size。在这种情况下，我推荐的是CSS3Pie。按照 css3pie 网站上的说明进行操作，即使在非常旧的 IE 版本中，您也可以使用标准的background-size。

希望对您有所帮助。

【讨论】：

非常好的和干净的解决方案..不知道 OP 是否有兴趣阅读这一切....但是对于未来的访问者 +1 的一个非常富有成果的答案 :)

【解决方案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

【讨论】：

请注意，条件 cmets 功能在 IE10 中不可用，因此此技巧在 IE10（或未来的 IE 版本）中不起作用。
@Spudley 对于 IE10 特定情况，您可以运行媒体查询
嗯，是的，也有检测 IE10 的方法。不过老实说，最好进行特征检测，因为 IE10（甚至 IE9）对 OP 的背景图像没有任何问题。这里提供有条件的 cmets 来检测 IE 的所有答案都是错误的树。我想 OP 并没有真正提出正确的问题，但它有助于在这种情况下阅读字里行间并找出实际问题是什么，而不是给出所要求的答案。
@Spudley 实际上，OP 没有用 JS/jQuery 或任何其他东西标记问题，所以必须在固定容器中。媒体查询是我最多能想到的。让我知道您是否知道在 html/css 约束中处理它的另一种方法..请告诉我..对我来说将是 g8 学习的东西:)
在我的回答中，我给出了四种可能的解决方案。其中只有两个使用 Javascript。第一个是纯 CSS 解决方案，如果支持 background-size，则使用背景图像，因此 IE8 将获得纯色背景作为后备。我怀疑这对他来说是最好的解决方案（它肯定是最干净的解决方案），但是还有其他几种解决问题的方法，其中一些即使在旧的 IE 版本中也会给他一个工作背景图像，而不需要一个普通的颜色回退。

【解决方案3】：

条件样式表是您所需要的。通过使用下面的代码，您可以设置一个仅在 IE 中使用的样式表，您可以在其中为 body 设置另一种样式。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

【讨论】：

请注意，如果他希望所有 IE 版本都受到影响，那么在 IE10 中这将失败，因为它不支持条件 cmets。
我不知道，谢谢！有没有在 IE10 中有效的替代方案？
不是直接的等价物——MS 正在共同努力使 IE 符合标准，因此他们正在删除这样的非标准内容。但另一方面，这也意味着 IE10 通常非常擅长与您的代码兼容，因此很少需要这样的技巧。如果需要，您应该使用特征检测（例如使用 Modernizr 库）而不是浏览器检测。

【解决方案4】：

将您的 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 不支持条件 cmets，此方法适用于

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

请注意，如果他希望所有 IE 版本都受到影响，那么在 IE10 中这将失败，因为它不支持条件 cmets。

【解决方案7】：

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

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

【讨论】：

请注意，如果他希望所有 IE 版本都受到影响，那么在 IE10 中这将失败，因为它不支持条件 cmets。

【解决方案8】：

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

要仅针对 Internet Explorer，请在要针对 I.E. 的代码前面添加一个“*”。使用上面的示例，背景不会出现在 I.E.像这样使用 *：

    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;

【讨论】：