我有一个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 */
        }

09-26 16:23