1

jQuery UI アコーディオンのかなり奇妙なバグ....

バージョン情報

  • Internet Explorer 8、9、10 --> 「互換表示」がオンになっている。
  • jQuery UI 1.10.1
  • jQuery コア 1.9.1

問題のシナリオ

複数の個別のアコーディオンを垂直に積み重ねています。ヘッダーをクリックして上部のアコーディオンを折りたたんだり展開したりすると、表示/非表示のコンテンツのためのスペースを空けることが期待されるように、下の要素が上下にスライドします。ただし、すぐ下のアコーディオンのヘッダーは、他のすべてが下にスライドする間、その場でホバリングしたままです. 本当に悪いように見えます。この不正なフローティング ヘッダーにマウス カーソルを合わせると、本来あるべき場所にスナップして戻ります。

コード

私の仕事がサイトのブロックを解除した場合（目を転がす）、後でjsFiddleを設置できることを願っています。今のところ、コードの簡略化されたバージョンは次のとおりです。

<script>
    $(document).ready(function ()
    {
        $(".accordion").accordion(
        {
            collapsible: true,
            active: 0,
            heightStyle: 'content',            
            icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
        });
    });
</script>
<style>
    .whitebackground { background-color: #FFF; }
    .contentDiv { height: 70px; background-color: lightblue; }
</style>
<div>    
    <div class="whitebackground">
        <table>
            <tr>
                <td>
                    <div class="accordion">
                        <h3>Accordion Header 1</h3>
                        <div>
                            <div class="contentDiv">
                                Some content here 1
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <div class="accordion">
                        <h3>Accordion Header 2</h3>
                        <div>
                            <div class="contentDiv">
                                Some content here 2
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

バグを再現

バグを再現するには、ヘッダーをクリックして上部のアコーディオンを折りたたんでみてください。すぐに問題が発生します。

絞ってしまった…

これを引き起こしている正確な問題を絞り込むことができました。whitebackground CSS クラスを削除すると、問題はなくなります。なぜこれが起こっているのですか？これはバグのように見えますか？

この最後の部分を読んでください

はい、HTML 構造をそのままにしておく必要があります。この例では、バグを維持しながら大幅に簡略化しました。私は実際に TABLE 要素を適切な位置に保持したいと言えば十分です。削除を提案する必要はありません。また、TABLE をすぐに含む DIV に CSS の背景色も指定できるようにする必要があります。また、ユーザーが IE で「互換表示」をオフにすることはできません。これは、内部 Web アプリにアクセスするときに、AD グループ ポリシーがすべてのユーザーに対してそれを強制するためです。

何か案は？

4

1 に答える 1

0

これは、.ui-accordion-header に適用された position:relative css ルールが原因のようです。コメントアウトすると、IE 互換モードで問題が解決するようです。

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    /*position: relative;*/
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0; /* support: IE7 */
}

ただし、これにより、ヘッダー アイコンが間違った場所に表示されます。補償するには、CSS を微調整する必要があります。他の副作用もあるかもしれません。

于 2013-08-06T16:52:39.263 に答える