Question

当我将鼠标悬停在图像上时，我正在使用背景位置方法来更改图像。这对我在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; 
}

帮助？

Answer 1

我遇到了类似的问题，即悬停时background-position更改的css翻转不起作用，仅在IE8中。它们是非常零星的 - 有时会有一个人转出来，但之后会一直停留在悬停状态一段时间，直到另一个最终会触发。

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

Answer 2

以下是一些讨论ie8

中png问题的网页

http://www.mooforum.net/discussion/issue-with-png-transparency-ie8-t2063.html

http://www.vistaheads.com/forums/microsoft-public-internetexplorer-general/433700-problem-alpha-transparent-png-ie8.html

How to solve/hack fading semi-transparent PNG bug in IE8?

Answer 3

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

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

IE8后台位置开启：悬停不移动文件

3 个答案: