Question

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

Answer 1

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

首先，我应该告诉您IE9及更高版本支持background-size，因此您不需要对所有IE版本进行全面更改。你只需要处理IE8及更早版本中缺乏支持的问题。

以下是一些选项：

纯CSS解决方案：
您可以利用CSS处理未知属性的方式，通过以速记background-size样式指定大小作为参数，为不支持background的浏览器提供纯CSS回退：
```
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'脚本可以在旧的IE版本中实现一些缺少的CSS功能，包括background-size。在这种情况下，我推荐的是CSS3Pie。按照css3pie网站上的说明操作，即使在非常旧的IE版本中也可以使用标准background-size。

希望有所帮助。

Answer 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

Answer 3

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

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

Answer 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不支持条件注释，此方法适用于＆lt; IE9。

Answer 5

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

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

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

Answer 6

有很多不同的方法可以做到这一点，这实际上取决于你在页面上做了什么。一种简单的方法是<head>标记中的以下HTML。

Answer 7

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

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

Answer 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;

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

8 个答案: