1

这个 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 中。

该代码的灵感来自这个关于锚点、精灵和 CSS的问题。我发现了一个类似的问题，但是由于这段代码被放置在一个相当复杂的 Drupal 安装中，我仍然希望有一种更简单的方法来解决这个问题，而不是通过代码找到一些“绝对定位的外部 div 和一些菜单样式” "，它负责2中的问题。

谢谢你的帮助。

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

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

4

2 回答 2

1

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

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

于 2012-06-07T16:29:15.377 回答
0

这个问题是相关的： IE CSS Bug: background-color: transparent behavior different 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 包含一些修复程序。

于 2012-06-04T15:47:10.127 回答