Question

我已经搜索并搜索并尝试了许多选项来解决这个“错误”，我无法让它工作。我有一个div，背景图像隐藏在包装器后面。在悬停时，它会向顶部移动。链接位于绝对定位的div内，没有文本。在IE上没有“指针”，因此使链接无法点击。这适用于Chrome / FF。

我试过了：

border-right 1px transparent（这实际上我可以得到一个“指针” 在最右边，但它太小了
背景： url（/images/transparent.gif）0 0重复; （是的，我做了1x1px反式图像）
将另一个div放在具有背景的锚点内 image
z-index：0或1或2

我想要CSS / HTML修复此问题，而不是javascript。非常感谢！

CSS

#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}

.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}

#login-btn
{
position:absolute;
top:-15px;
right:20px;
z-index:-1;
}

#login-btn a
{
display:block; 
width: inherit; 
height: inherit; 
background-image: url(/images/transparent.gif) 0 0 repeat; 
}

HTML

    <div id="wrapper" class="round">
        <div id="login-btn" class="login-btn">
            <a href="#">
            </a>
        </div>
    .....
    .....

Answer 1

这是您的代码，我附上图片也请复制到您的图片文件夹并进行测试。我检查了ie8和ie7它工作正常。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#wrapper {
    width: 950px;
    height:450px;
    margin: 0 auto;
    background-color: #fff;
    border:#F33 solid thin;
    position:relative;
}

#login-btn {
    height: 33px;
    width: 145px;
    display:block;
    position:absolute;
    right:0;
    top:5px;
}
#login-btn a:link, #login-btn a:visited {
    background:url(images/btn-sprite.png) top left no-repeat;
    height: 33px;
    width: 145px;
    display:block;
}

#login-btn a:hover {
    background:url(images/btn-sprite.png) bottom left no-repeat;
    height: 33px;
    width: 145px;
    display:block;
    cursor:pointer;
}

</style>
</head>

<body>
    <div id="wrapper">
        <div id="login-btn">
            <a href="#"></a>
        </div>
</body>
</html>

this is a sprite image

Answer 2

我明白了。在IE中，你不能拥有一个带有负z-index的锚，b / c它隐藏在身体后面或其他什么，并且事件不会被传递。基本上我最终做的是将div放在div（login-btn）周围，并给div一个z-index为-1，从而减轻锚点上的z-index

HTML

<div id="wrapper" class="round">
<a href="#" id="login-btn">
    <div class="login-btn">
    </div>
</a>
....
....

CSS

#wrapper
{
  width: 950px;
  margin: 60px auto 40px;
  background-color: #fff;
  position:relative;
}

.login-btn
{
  background: url(/images/btn-sprite.png) no-repeat 0 -48px;
  height: 34px;
  width: 98px;
}

a#login-btn
{
  display:block; 
  height: 34px;
  width: 98px;
  position:absolute;
  top:-15px;
  right:20px;
}

a#login-btn div
{
  z-index: -1;
  position:relative;   
}

绝对定位div IE内的空锚标签

2 个答案: