Css 绝对定位分区内的空锚定标签_Css_Internet Explorer_Anchor_Css Position

Css 绝对定位分区内的空锚定标签

css internet-explorer

Css 绝对定位分区内的空锚定标签,css,internet-explorer,anchor,css-position,Css,Internet Explorer,Anchor,Css Position,我搜索了又搜索，尝试了很多方法来修复这个“bug”，但我无法让它工作。我有一个div，它有一个背景图像，一半隐藏在包装器后面。悬停时，它会向顶部设置动画。链接位于绝对定位的div中，没有文本。IE上没有“指针”，因此链接无法点击。这适用于Chrome/FF 我试过：右边框1px透明（这实际上我可以得到一个“指针” 在最右边，但它太小了背景： url（/images/transparent.gif）0 0重复；（是的，我进行了1x1px传输（图片）在具有背景的锚点内放置另一个div 形象

我搜索了又搜索，尝试了很多方法来修复这个“bug”，但我无法让它工作。我有一个div，它有一个背景图像，一半隐藏在包装器后面。悬停时，它会向顶部设置动画。链接位于绝对定位的div中，没有文本。IE上没有“指针”，因此链接无法点击。这适用于Chrome/FF

我试过：

右边框1px透明（这实际上我可以得到一个“指针” 在最右边，但它太小了

背景： url（/images/transparent.gif）0 0重复；（是的，我进行了1x1px传输（图片）

在具有背景的锚点内放置另一个div 形象

z索引：0或1或2

我想要CSS/HTML修复程序，而不是javascript。非常感谢

CSS

HTML


.....
.....

这是您的代码，我正在附上图像，请复制到您的图像文件夹并进行测试。我在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>


无标题文件
#包装纸{
宽度：950px；
高度：450px；
保证金：0自动；
背景色：#fff；
边框：#F33实心薄；
位置：相对位置；
}
#登录btn{
高度：33像素；
宽度：145px；
显示：块；
位置：绝对位置；
右：0；
顶部：5px；
}
#登录btn a:链接，#登录btn a:已访问{
背景：url（images/btn sprite.png）左上角不重复；
高度：33像素；
宽度：145px；
显示：块；
}
#登录btn a：悬停{
背景：url（images/btn sprite.png）左下角不重复；
高度：33像素；
宽度：145px；
显示：块；
光标：指针；
}

我找到了答案。在IE中，你不能有一个带有负z索引的锚点，b/c它将其隐藏在主体后面或其他任何地方，并且事件无法通过。基本上，我最后做的是将锚点放在div周围（登录btn），并给div一个z索引-1，从而释放锚点上的z索引

HTML

我什么都不懂。请检查：我认为你没有正确阅读我的帖子。我没有一个可以改变样式的按钮，我有一个可以动画的按钮。第二件事是，我把按钮隐藏在包装的一半下面。

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

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

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

#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;   
}