我有一个 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 中的蓝色物体上时,跨度会重新出现