a：悬停在img之上并不能正常使用IE和IE下的显示块歌剧

时间：2010-07-20 20:08:48

标签： css internet-explorer hover image

如果 a： 位置：绝对并且高于＆lt; img＆gt; ，则IE＆amp;戏

a：悬停有背景，但<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="#">&lt;a&gt; 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="#">&lt;a&gt; with background</a>
        <img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
    </div>
    <div> <a class="link nobackground" href="#">&lt;a&gt; 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>

2 个答案:

答案 0 :(得分：1)

这是一个非常古怪的错误。现在，如果你真的必须按照自己的方式组织你的html，那么IE需要将放在 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}

我希望这些能帮助你解决问题。

答案 1 :(得分：0)

斯科特，谢谢你的回答。这只是问题的一个例子。

当然我的真实代码比那个大： - 2个标签导航prev / next（所以我不能放<a><img></a>） - 两者都有显示：无（<a><span>prev</span></a>）。显示：块没有帮助

z-index没有帮助。位置：绝对有效，<a>有背景。

我不能使用过滤器：alpha（opacity = 0）或opacity = 0，因为不是每个浏览器都支持过滤器。

我找到解决问题的奇怪解决方案，但不想使用它：a {background: url(filedoesnotexists);}或者我可以使用例如透明的1x1 gif文件，但我想找到问题的原因。

与img{position: absolute; z-index: -1;} div{position: relative;} a{position: static;}的解决方案完全相同 - 没有在img上面的背景悬停，即＆amp;戏

我在主代码中遇到了另一个奇怪的事情 - 将尝试重现它。 （以下编辑）

这是另一个奇怪的问题 - IE工作，但只有当它有另一个“图层”并且鼠标悬停在此图层上方时。 Opera在每种情况下都能正常工作：

http://bckp.eu/test2.html - 点击Exif信息并将鼠标移到图片/新“图层”

相关问题
最新问题