0

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

4

2 回答 2

0

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

溢出：可见！重要；

那应该这样做。

于 2014-09-10T16:32:43.840 回答
0

尝试添加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 */
        }
于 2012-08-13T05:52:42.360 回答