0

div を非表示にするためのボタンとして機能する絶対配置スパンを持つ ASP.NET ページがあります。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 のスライドが終了すると消えます。

aspx ページにあるときにspan.hide-instructionsが消える理由が本当にわかりません。コードは同じです。助けていただければ幸いです。

ありがとうございました！

更新: 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 に答える