【问题标题】: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;     
}

【问题讨论】:

  • 您已经指定了两次 marginpadding。 (这不会造成问题,但也无济于事)
  • 真正的问题是“你想影响哪些 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】:

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

      &lt;!--[if IE]&gt;&lt;style&gt;html,body{ background-image: none; }&lt;/style&gt;&lt;![endif]--&gt;

      【讨论】:

      • 请注意,如果他希望所有 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;
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-08-11
        • 1970-01-01
        • 2011-09-16
        • 2012-09-19
        • 1970-01-01
        • 2015-09-17
        • 2013-12-22
        相关资源
        最近更新 更多