我希望背景图片不显示在IE.我该怎么做呢?

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

我猜这里的问题是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 solution:
虽然IE8不支持background-size，但可以使用-ms-filter属性来模拟它，并取得一定程度的成功。您可以使用这样的代码:
```
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
```
示例取自MDN
Polyfill solution:
有一些"polyfill"脚本可以在旧的IE版本中实现一些缺失的CSS功能，包括background-size。在这种情况下，我推荐的是CSS3Pie。按照css3pie网站上的说明，你将能够使用标准的background-size，即使在非常旧的IE版本。

希望对你有帮助。

use conditional statement.

<!--[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

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

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

将你的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]-->

    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。>

根据您想要定位的IE版本，您可以使用条件注释(和/或仅限IE的样式表):

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

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

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

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

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

如果只针对ie浏览器，请在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;

相关内容

最新更新

热门标签：