0

当我将鼠标悬停在图像上时，我正在使用更改图像的背景位置方法。这对我来说在 FF、Chrome 和 Safari 中运行良好，但在 IE8 中却不行。背景图像是一个包含 Alpha 透明度的 .png。我已经通过 W3C 验证器运行了我的代码并且它是有效的，所以我不应该使用兼容模式。

这是相关的html代码片段：

<div id="main-nav">
<div id="texas">
  <a href="texas.html"><span>texas</span></a>
  <h2>texas</h2>
</div>
<div id="washington">
  <a href="washington.html"><span>washington</span></a> 
  <h2>washington</h2>
</div>
</div>

以及相关的CSS：

#main-nav {
  width: 844px;
  height: 400px;
  margin: 40px auto; 
  position: relative;
}

#texas, #washington { 
  position: absolute; 
  height: 500px; 
  width: 196px;
}

#texas a {
  background-image: url("pics/texas.png"); 
}

#washington a {
  background-image: url("pics/washington.png");
}

#texas a, #washington a { 
  height: 400px; 
  width: 196px;
  display: block;
}

#texas a:hover, #washington a:hover { 
  background-position: 196 0; 
}

帮助？

4

3 回答 3

1

我遇到了类似的问题background-position，只有在 IE8 中才能在悬停时进行更改的 CSS 翻转不起作用。它们非常零星——有时一个会切换出来，但随后会停留在悬停状态一段时间，直到最终触发另一个。

我发现通过从任何filter: alpha(opacity=100);元素的父元素的 css 中删除任何特定于 IE 的透明度过滤器，问题得到了解决。

于 2012-07-18T19:44:17.887 回答
0 
#texas a:hover, #washington a:hover { 
  background-position: 196px 0; 
}

将 px 值添加到 196。否则 .png 透明度仅在 IE6 中不起作用，可以通过以下方式解决：http: //www.twinhelix.com/css/iepngfix/

于 2011-03-11T12:10:22.770 回答