ما هو الحل المفضل لتثبيت المحتوى غير القابل للقرابة بعد تطبيق مرشح IE6 لـ PNGs؟

Question

<div id="calendar">
  <p>Text</p>
  <div class="section">blah</div>
</div>

أنا أقوم بتطبيق PNG على #Calendar ، في IE6 أنا أستخدم المرشح ولكنه يجعل المحتوى غير قابل للنقر - أعتقد أن هذا هو إجبار كل شيء في الداخل على أن يكون في وضع (على سبيل المثال الموقف: نسبي) ولديك z-ondex + هاسلايوت لكن في بعض الأحيان لا يعمل.

هل يجب أن ألف كل ما عندي من أشيائي في Div آخر وتطبيق PNG BG على عقدة شقيق مثل هذا ، أم ماذا؟

<div id="calendar">
  <div id="calendar-bg"></div>
  <div id="calendar-content">
    <p>Text</p>
    <div class="section">blah</div>
  </div>
</div>

ثم إجبار التقويم على أن يكون في وضعه تمامًا وعرض/ارتفاع بنسبة 100 ٪ ، ووضع المحتوى #التقويم نسبيًا؟ أم أن هناك طريقة خفية أخرى في عمل البرامج النصية الرئيسية لـ PNG (ALA HTC ، jQuery.pngfix)؟

Answer 1

هذا هو في الواقع الحل الصحيح (فقط) لهذه المشكلة التي صادفتها على الإطلاق. لا يمكنك الاعتماد على الحل الأول (وضع الأطفال نسبيًا) ، لأن مرشح العتامة في IE يتم إلقاؤه على جميع عناصر الأطفال ، مع عدم النقر على عناصر الطفل نتيجة لذلك.

لذلك فقط تأكد من أن PNG ليس في العنصر الأصل لعنصر قابل للنقر.

لذلك ، قم بإنشاء أحد الوالدين مع "الموضع: النسبي" (أو المطلق ، يعتمد على تخطيطك) وأدخل طفلين للخلفية والمحتوى الفعلي.

مثال:

<div id="calendar">
   <div id="calendar-bg"></div>
   <div id="calendar-content">
       <p><a href="#">Text</a></p>
   </div>
</div>

 
 #calendar { position: relative; }
 #calendar #calendar-bg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; /* Or the height and width in pixels if you know them */
    width: 100%; }
 #calendar #calendar-content { 
    position: relative;
    z-index: 1; }
 

Answer 2

أعتقد أن الطريق حول هذا هو إجبار كل شيء في الداخل على وضعه (على سبيل المثال الموقف: النسبي) ولديه Z-index + Haslayout ولكنه في بعض الأحيان لا يعمل.

الموقف: النسبية لا تؤدي إلى هاسلايوت. يجب أن تجرب شيئًا بسيطًا مثل zoom:1 مع z-ondex.

أنا متأكد تمامًا (من ذاكرتي في التعامل مع مشكلة مماثلة) أن محاولة وضع الأشياء نسبيًا على رأس PNG في IE6 لا يعمل ، ولكن تحديد Z-Endex لا.