1

jQuery アコーディオン プラグインと IE7 に奇妙な問題があります (おそらくそれより前に、そこでテストしていません)。ThemeRoller で構築されたカスタマイズされた jQuery UI テーマを使用しています。色、余白、境界線を調整するために微調整しました。アコーディオンは DIV 内にあり、これはメイン コンテンツ内にネストされています。簡略化されたマークアップと CSS は以下のとおりです。基本的に、コンテンツは境界線で囲まれた中央のボックスです。メニューはボックスの上部より下にオフセットされ、左端に浮いています。

問題は、IE7 でメニューにカーソルを合わせると、基になるmainDIV の境界線がアコーディオンを通して表示されることです。これは FF や Safari では発生しません。問題は、デフォルトのアコーディオン CSS が z-index を 1 に設定する理由です。それらの要素のすべてが、その背後にある DOM 要素の上に表示されるべきではありませんか? そして、なぜホバー時だけですか？

私はすでにこの問題を解決しており、解決策を回答として投稿します。

<div id="main" style="position: relative;">
    <div id="main-menu">
        <ul id="navigation" class="ui-accordion">
            <li>
                <div class="ui-accordion-header">
                </div>
                <div class="ui-accordion-content">
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

#main
{
    clear: both;
    padding: 30px 30px 30px 30px;
    background-color: #fff;
    border: solid 1px #669933;
    margin-bottom: 30px;
    min-height: 500px;
    height: auto !important;
    height: 500px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#main-menu
{
    position: absolute;
    top: 1em;
    left: -1em;
}

#navigation
{
    width: 10em;
}

/*UI accordion*/
.ui-accordion {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.5; text-decoration: none; font-size: 100%; list-style: none;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
/* additions from default */
    background-color: #ffffff;
    color: #333333;
    border: solid 1px #336600;
    text-indent: 0.2em;
    z-index: 1;
}
4

1 に答える 1

2

さまざまな .ui-accordion クラスで z-index を明示的に設定しようとした後、1 レベルバックアップすることにしました。DIVに z-index (1) を設定するとmain-menu、IE7 の問題が解決することがわかりました。メインの .ui-accordion クラスの z-index は常にそこにあることに注意してください。ui-accordion クラスをmain-menudiv に適用するとレイアウトが壊れてしまうので、ui-accordion クラスが適用された状態で機能するようにスタイルを変更するよりも、単に z-index をメイン メニューに追加する方が簡単だと考えました。

于 2009-03-11T15:07:48.530 に答える