CSS Sprite 在 FF12 中有效，但在 IE8 中无效答案

【问题标题】：CSS Sprites work in FF12 but not IE8CSS Sprite 在 FF12 中有效，但在 IE8 中无效
【发布时间】：2012-06-08 00:29:15
【问题描述】：

这个 HTML 代码...

<a href="LINK" class="testclass"></a>

...使用此 CCS 代码...

  a.testclass
  {
    background: transparent url(sprite.png) no-repeat -125px -671px;  
    display: block;
    width: 378px;
    height: 150px;
  }

...在 Firefox 12 中，但不在 Internet Explorer 8 中。

代码的灵感来自question regarding anchors, sprites and CSS。我找到了similar questions，但由于这段代码被放置在一个相当复杂的 Drupal 安装中，我仍然希望有一种更简单的方法来解决这个问题，而不是通过代码找到一些“绝对定位的外部 div 和一些菜单”样式”，它在2 中解决了这个问题。

感谢您的帮助。

Edit-1：

这是 Firebug HTML 日志：

<div id="banner-area">
  <div id="banner-left">
    <div class="region region-banner-left">
      <div>
        <a href="LINK">
          <img width="378" height="150" alt="ALTTEXT" src="IMAGE.GIF">
        </a>
      </div>
    </div>
  </div>
  <div id="banner-right">
    <div class="region region-banner-right">
      <p>
        <a class="testclass" href="LINK"></a>
      </p>
    </div>
  </div>
</div>

引用的 CSS 代码是：

#banner-area {
    width:756px;
    margin:0;
    padding:0;
    overflow:hidden;
}

#banner-left {
    width:378px;
    float:left;
    margin:0;
    padding:0;
}

#banner-right {
    width:378px;
    float:right;
    margin:0;
    padding:0;  
}

第一张图片（IMAGE.GIF）在 FF 和 IE8 中显示。第二个，我想用 sprite 替换的那个，只在 FF 中显示，但在 IE8 中没有。

我按照弗洛里安的建议打开和关闭了透明度，但没有任何效果。我已将图像大小在宽度和高度上减小了 10 像素，但这也无济于事。

【问题讨论】：

您能提供更多信息吗？！除了“透明”声明之外，它也应该在 IE8 中工作。你试过删除这个吗？
我添加了更多细节。我检查了它在没有“透明”语句的 IE 中的外观，但这没有帮助。

标签： internet-explorer-8 css-sprites firefox-12

【解决方案1】：

在浪费了两天时间后，我发现 IE8 导入的 css 文件不超过 31 个：http://drupal.org/node/228818?page=1

在我安装的 Drupal 管理面板中再次启用“优化 css 文件”功能后，我已将其关闭，因此它不会干扰我的开发，一切正常。

【讨论】：

【解决方案2】：

所以把你的代码改成：

a.testclass
{
  background: url(sprite.png) no-repeat -125px -671px;
  display: block;
  width: 378px;
  height: 150px;
}

如果您确实需要擦除该背景颜色（因此将其设置为透明），请尝试其他设置，例如

a.testclass
{
  background-color: transparent;
}

但是，IE8 不喜欢这样，因此请注意为 IE8 包含一些修复程序。

【讨论】：