css - شرح - IE7 Z-Index قضايا طبقات




z-index شرح (8)

لقد عزلت حالة اختبار صغيرة لعلة z-index من IE7 ، ولكن لا نعرف كيفية إصلاحها. لقد لعبت مع z-index طوال اليوم.

ما هو الخطأ في z-index في IE7؟

اختبار CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

اختبار HTML:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

https://code.i-harness.com


"في عناصر IE الموضعية ، يتم إنشاء سياق تجميع جديد ، بدءًا من قيمة مؤشر z 0. لذلك لا يعمل الفهرس z بشكل صحيح".

حاول إعطاء العنصر الأصل قيمة مؤشر z أعلى (يمكن أن تكون أعلى من قيمة z-index نفسها) لإصلاح الخطأ.


إذا كانت الفهرسة z الأعلى المذكورة سابقًا في العقد الأصل لا تتناسب مع احتياجاتك ، يمكنك إنشاء حل بديل واستهدافها للمتصفحات التي تسبب مشكلات إما عن طريق التعليقات الشرطية لـ IE أو باستخدام ميزة الكشف عن (أكثر مثالية) التي يوفرها Modernizr.

اختبار سريع (ومن الواضح أن العمل) لـ Modernizr:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

في IE6 بشكل عام ، يتم تنفيذ بعض عناصر واجهة المستخدم مع عناصر التحكم الأصلية. يتم تقديم عناصر التحكم هذه في مرحلة منفصلة تمامًا (النافذة؟) وتظهر دائمًا فوق أي عناصر تحكم أخرى ، بغض النظر عن z-index. مربعات التحديد هي عنصر تحكم آخر إشكالي.

الطريقة الوحيدة للتعامل مع هذه المشكلة هي إنشاء محتوى يعرضه IE كـ "نافذة" منفصلة - أي يمكنك وضع مربع اختيار على مربع نص ، أو ، بشكل أكثر فائدة ، iframe.

باختصار ، ستحتاج إلى وضع "تحليلي" مثل أشياء مثل القائمة في iframe من أجل السماح لـ IE بوضع هذه الضوابط المدمجة في واجهة المستخدم.

يجب أن يكون هذا قد تم إصلاحه في IE7 (راجع http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) ولكن ربما كنت تعمل في وضع التوافق؟


لقد قمت بحلها باستخدام أدوات المطور لـ IE7 (في شريط الأدوات) وإضافة فهرس z سلبي إلى حاوية div التي ستكون أقل من div الأخرى.


لقد وجدت أنه كان علي أن أضع تصنيفًا خاصًا بـ z-index على div في ورقة أنماط محددة لـ7:

div {z-index: 10؛ }

بالنسبة إلى فهرس z لأسماء div غير المرتبطة ، مثل nav ، لعرضه أعلى شريط التمرير. لا يمكنني ببساطة إضافة فهرس z إلى slider slider نفسه.


مؤشر Z ليس قياسًا مطلقًا. من الممكن لعنصر ذو فهرسة z: 1000 أن يكون خلف عنصر مع فهرسة z: 1 - طالما أن العناصر المعنية تنتمي إلى سياقات تكديس مختلفة.

عند تحديد z-index ، فإنك تحدده نسبة إلى العناصر الأخرى في نفس سياق التراص ، وعلى الرغم من أن فقرة CSS الموجودة في فهرسة Z-index تقول أن سياق تكديس جديد يتم إنشاؤه فقط للمحتوى الذي تم وضعه مع فهرس z آخر غير auto (بمعنى أن المستند بأكمله يجب أن يكون سياق تجميع واحد) ، فقد قمت ببناء امتداد معين: للأسف يفسر IE7 المحتوى الذي تم وضعه بدون فهرس z هذا كسياسة تكديس جديدة.

باختصار ، حاول إضافة CSS هذا:

#envelope-1 {position:relative; z-index:1;}

أو إعادة تصميم المستند بحيث لا يمتد الامتداد الخاص بك إلى موضع: النسبية بعد الآن:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

راجع http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ للحصول على مثال مشابه لهذا الخطأ. السبب في إعطاء عنصر أصل (مغلف - 1 في المثال الخاص بك) يعمل مؤشر z- أعلى لأن جميع أطفال المغلف -1 (بما في ذلك القائمة) سيتداخلون مع جميع الأشقاء المغلفين 1 (على وجه التحديد ، المغلف 2).

على الرغم من أن z-index يسمح لك بتعريف كيفية تداخل الأشياء بشكل واضح ، حتى بدون الفهرسة z ، فإن ترتيب الطبقات محدد بشكل جيد . وأخيرًا ، يحتوي برنامج IE6 على خطأ إضافي يتسبب في اختيار selectboxes وإطارات iframe على أي شيء آخر.


يبدو وكأنه ليس علة ، فقط لفهم مختلف لمعيار المغلق. إذا لم يتم تحديد الحاوية الخارجية للمؤشر z ، لكن العنصر الداخلي حدد فهرسة z أعلى. لذلك قد تراكب شقيقة الحاوية على عنصر مؤشر z المرتفع. حتى لو كان الأمر كذلك ، فإنه يحدث فقط في IE7 ، ولكن IE6 و IE8 و Firefox على ما يرام.