0

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

我试过了：

  1. border-right 1px 透明（这个我实际上可以在最右边得到一个“指针”，但它太小了
  2. 背景：url（/images/transparent.gif）0 0重复；（是的，我制作了一个 1x1px 反式图像）
  3. 在具有背景图像的锚点内放置另一个 div
  4. 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>
    .....
    .....
4

2 回答 2

0

我想到了。在 IE 中，你不能有一个带有负 z-index 的锚点，b/c 它将它隐藏在身体或其他任何东西后面，并且事件不会通过。基本上我最终做的是将锚点放在 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;   
}
于 2012-12-15T13:02:38.030 回答
0

这是你的代码，我附上图片也请复制到你的图片文件夹并测试。我检查了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>

这是一个精灵图像

于 2012-12-14T08:19:22.093 回答