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

我已经搜索和搜索，并尝试了很多选项来解决这个“错误”，我不能得到它的工作。我有一个div，背景图像隐藏在包装中。在盘旋时，它向顶部发展。该链接位于绝对定位的div内，并且没有文本。在IE上没有“指针”，因此使链接无法点击。这适用于Chrome/FF。绝对定位的div内的空锚标记IE

我已经试过：

右边框1px的透明（这实际上，我可以得到一个“指针” 在最右边，但它是如此之小
背景： URL（/图片/transparent.gif）0 0重复序列;（是的，我由1x1px反图像）
把另一个DIV具有背景图像锚内部
z索引：0或1或2

我想这个，而不是JavaScript的CSS/HTML修复。非常感谢！

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> 
    ..... 
    .....

来源

2012-12-14 Rob Scott

没有任何理解。 –

请检查此：http://stackoverflow.com/a/11085782/1169519 – Teemu

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

来源

2012-12-14 08:19:22

我不认为你正确阅读我的帖子。我没有改变样式的按钮，我有一个动画按钮（简化）。第二件事是我将按钮隐藏在包装的中间。 –

我理解了它。在IE中，你不能有一个锚点/一个负Z指数，B/C它隐藏在身体后面或其他任何事情，事件不会通过。基本上是我最后做的是将锚周围的DIV（登录-BTN），并给予DIV -1的z-index，因此减轻对锚

HTML

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

的Z-index

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-15 13:02:38

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

回答

相关问题