Question

我有一个ASP.NET页面，它有一个绝对定位的跨度，用作隐藏div的按钮。它在Firefox，Chrome和Safari中运行良好，但它在IE中消失了。我使用普通的HTML（而不是网络表单）将相同的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中的蓝色内容时，跨度会重新出现

Answer 1

尝试添加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 */
        }

Answer 2

将以下样式添加到正在消失的元素中，这是一个ie-quirk。

溢出：可见！重要;

应该这样做。

绝对定位的元素在IE中消失

2 个答案: