Question

此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中的问题。

感谢您的帮助。

修改-1：

这是Firebug HTML-Log：

<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中。第二个，我想用精灵替换的那个，只在FF中显示，但在IE8中不显示。

弗洛里安建议我开启和关闭透明度，但没有效果。我将图像尺寸的宽度和高度缩小了10px，但这也无济于事。

Answer 1

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

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

Answer 2

这个问题是相关的： IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)

所以请将您的代码更改为：

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

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

a.testclass
{
  background-color: transparent;
}

然而，IE8并不喜欢这样，所以请注意为IE8包含一些修复。

CSS Sprites在FF12中工作，但不在IE8中工作

2 个答案: