a：在 IE 和 Opera 下，将鼠标悬停在 img 上方无法正常使用显示块
Posted
技术标签:
【中文标题】a：在 IE 和 Opera 下，将鼠标悬停在 img 上方无法正常使用显示块【英文标题】：a:hover above img doesnt work properly with display block under IE & Opera 【发布时间】：2011-03-18 15:50:56 【问题描述】：有没有人遇到 a:hover 的问题，它具有 position: absolute 并且在 IE 和 Opera 下高于 p>
a:hover 有背景，但<a> 没有，两者都有display: block。
Thank you in advance for your help
...
要查看问题，请查看此网页： http://bckp.eu/test.html
或
使用此代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
div
border: 1px solid black;
position: relative;
height: 200px;
width: 500px;
a.next
right: 0;
a.prev
left:0;
.withbackground
background: yellow;
.nobackground
background: transparent;
a.link
position: absolute;
top: 0;
width: 100%;
height: 100%;
border:0;
a.link:hover, a.link:focus
background: url(/img/comment.gif) repeat !important;
</style>
</head>
<body>
<div id="t">
<a class="link nobackground" href="#"><a> without background</a>
<img src="/img/DSC_00641.jpg" />
</div>
<p>Doesnt work under IE? <a href="#false" onclick="return a();">Add background</a> | This is not <a href="#" onclick="quirks()">quirks mode</a> <a href="http://www.satzansatz.de/cssd/quirksmode.html">#</a></p>
<hr />
<div>
<a class="link withbackground" href="#"><a> with background</a>
<img src="/img/DSC_00641.jpg" />
</div>
<div> <a class="link nobackground" href="#"><a> without background, without img</a> </div>
<script type="text/javascript">
function a()
document.body.innerHTML+='<style>#t a background: pink;</style>';return false;
function quirks()
alert(document.compatMode); return false;
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：这是一个非常古怪的错误。现在，如果你真的必须按照你的方式组织你的 html，那么 IE 需要将以下内容放在 inside a 标记中以使其注册到图像中。
<div style="position: absolute; filter: alpha(opacity=0); background: red; top: 0px; left: 0px"></div>
但这会更好（尚未完全跨浏览器测试）。像这样组织html（不需要包装器div）：
<a><img /></a>
确保a 不是position: absolute（IE7 无法使用它），然后将图像设置为：
img position: absolute; z-index: -1
我希望这些可以引导您解决问题。
【讨论】：
【参考方案2】：斯科特，谢谢你的回答。这只是问题的一个例子。
当然，我的真实代码比这要大：
- 2 个标签来导航上一个/下一个（所以我不能放 <a><img></a>）
- 两者都有但显示：无（<a><span>prev</span></a>）。显示：阻止没有帮助
z-index 没有帮助。 position: 绝对有效，当<a> 有背景时。
我不能有 filter: alpha(opacity=0) 或 opacity=0 因为不是每个浏览器都支持。
我找到了解决问题的奇怪解决方案，但不想使用它：a background: url(filedoesnotexists); 或者我可以使用例如透明的 1x1 gif 文件，但我想找到我的问题的原因。
imgposition: absolute; z-index: -1; divposition: relative; aposition: static; 的解决方案完全一样——在 ie 和歌剧的 img 上方没有背景的情况下没有悬停
我还在我的主代码中遇到了另一个奇怪的事情 - 将尝试重现它。 （编辑如下）
这是另一个奇怪的问题 - IE 可以工作，但只有当它有另一个“层”并且鼠标悬停在该层上方时。 Opera 在任何情况下都能正常工作：
http://bckp.eu/test2.html - 单击 Exif 信息并将鼠标移到图像/新“层”上
【讨论】：
我也遇到了这个问题。我通过将空白.gif 背景图像添加到空的绝对定位容器来“修复”它。以上是关于a：在 IE 和 Opera 下，将鼠标悬停在 img 上方无法正常使用显示块的主要内容，如果未能解决你的问题，请参考以下文章