絕對定位的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

回答

相關問題