طبقات مشكلة مع مسج الأكورديون وIE7

Question

ولدي مشكلة غريبة مع البرنامج المساعد مسج الأكورديون وIE7 (وربما في وقت سابق، لم تختبر هناك). أنا باستخدام تخصيص موضوع مسج UI بنيت مع شكل رولر. لقد أنب بعض لضبط الألوان، والهوامش، والحدود. يقع الأكورديون داخل DIV الذي هو، بدوره، تداخل داخل المحتوى الخاص بي الرئيسي. علامة مبسط صعودا وCSS أدناه. في الأساس المحتوى هو مربع تركز محاطة الحدود. ويقابل القائمة أدناه الجزء العلوي من منطقة الجزاء، ويطفو على الحافة اليسرى.

والمشكلة هي أنه في IE7 مرة واحدة كان لي تحوم فوق القائمة، الحدود من الأساسي المعرض main DIV خلال الأكورديون. هذا لا يحدث في FF أو سفاري. والسؤال هو لماذا، منذ CSS الأكورديون الافتراضي يضع فهرس z 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;
}

Answer 1

وبعد محاولة لوضع صراحة ض مؤشر على مختلف الطبقات .ui-الأكورديون، قررت لعمل نسخة احتياطية مستوى واحد. وتبين أن وضع مؤشر ض (1) على DIV main-menu يحل المشكلة في IE7. لاحظ أن ض مؤشر على الطبقة .ui-الأكورديون الرئيسية كان دائما هناك. تطبيق طبقة واجهة المستخدم، الأكورديون إلى شعبة main-menu يكسر تخطيط وأنا أحسب أنه سيكون من الأسهل لمجرد إضافة ض مؤشر إلى القائمة الرئيسية، أيضا، بدلا من محاولة تصفيف بحيث تعمل مع الطبقة واجهة المستخدم، الأكورديون تطبيقها .