有没有人遇到 a:hover 的问题，它具有 position: absolute 并且在 IE 和 Opera 下高于
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" height="200" width="500" alt="Dummy img" />
</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" height="200" width="500" alt="Dummy img" />
</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>
最佳答案
这是一个非常古怪的错误。现在，如果您真的必须按照自己的方式组织 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}
我希望这些能引导您朝着解决问题的方向前进。
关于css - :hover above img doesnt work properly with display block under IE & Opera，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3293931/