我有一个ASP.NET页面，该页面的绝对位置跨度用作隐藏div的按钮。它在Firefox，Chrome和Safari中运行良好，但在IE中消失了。我使用普通的HTML（不是Web表单）将相同的HTML结构和CSS复制到了文本编辑器中，并且不会消失。
这是HTML：
<!DOCTYPE html>
<html>
<head>
<title>Instructions</title>
<style type="text/css">
*
{
margin:0;
outline:0;
padding:0
}
body
{
font:normal 12px/1.4 Sans-Serif
}
#wrapper
{
margin:0 auto;
width:940px
}
.instructions-container
{
overflow:hidden;
position:relative
}
.instructions
{
border:3px solid #eee;
margin:10px 0 0;
padding:7px;
position:relative
}
.hide-instructions
{
background:url(../images/icon/cancel.png) no-repeat scroll 0 0 red;
cursor:pointer;
display:block;
height:16px;
position:absolute;
right:7px;
top:7px;
width:16px;
zoom:1
}
.show-instructions
{
background:#eee;
display:none;
color:#666;
float:right;
padding:10px;
text-decoration:none
}
.show-instructions:hover
{
background:#ccc
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function () {
InitializeInstructions();
});
function InitializeInstructions() {
var instructions = $('.instructions'),
hide = $('.hide-instructions'),
show = $('.show-instructions');
instructions.hide();
show.show();
hide.click(function () {
instructions.slideUp('slow');
show.slideDown('fast');
});
show.click(function () {
instructions.slideDown('slow');
show.slideUp('fast');
});
}
</script>
</head>
<body>
<div id="wrapper">
<div class="instructions-container">
<div class="instructions">
<h2>
Instructions
</h2>
<p>
Nulla vehicula volutpat nibh at semper. Praesent sem odio, dignissim eget scelerisque ut, ornare in enim.
Fusce pellentesque rhoncus egestas. Vestibulum lobortis nunc ligula, a elementum ligula. Pellentesque luctus
convallis sagittis. Nunc ut justo vitae elit luctus cursus a sed odio. Nam nec consectetur neque.
</p>
<span class="hide-instructions"></span>
</div>
<a class="show-instructions" href="#">
Show Instructions
</a>
</div>
</div>
</body>
</html>
单击a.show-instructions时，div.instructions与span.hide-instructions一起出现。事情是，它在div完成滑动后消失了。
我真的不明白为什么span.hide-instructions在aspx页面中时会消失；为什么？代码是一样的。帮助将不胜感激。
谢谢！
更新：
当您尝试突出显示文本并将鼠标悬停在IE8中的蓝色小东西上时，跨度重新出现
最佳答案
尝试添加z-index属性。可能是一个层问题。因此，您的.hide-instructions应如下所示：
.hide-instructions
{
background:url(../images/icon/cancel.png) no-repeat scroll 0 0 red;
cursor:pointer;
display:block;
height:16px;
position:absolute;
right:7px;
top:7px;
width:16px;
zoom:1;
z-index: 10000; /* Added a lot, because you never know */
}