ما هو الحل المفضل لتثبيت المحتوى غير القابل للقرابة بعد تطبيق مرشح IE6 لـ PNGs؟
-
22-09-2019 - |
سؤال
<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)؟
المحلول
هذا هو في الواقع الحل الصحيح (فقط) لهذه المشكلة التي صادفتها على الإطلاق. لا يمكنك الاعتماد على الحل الأول (وضع الأطفال نسبيًا) ، لأن مرشح العتامة في 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; }
نصائح أخرى
أعتقد أن الطريق حول هذا هو إجبار كل شيء في الداخل على وضعه (على سبيل المثال الموقف: النسبي) ولديه Z-index + Haslayout ولكنه في بعض الأحيان لا يعمل.
الموقف: النسبية لا تؤدي إلى هاسلايوت. يجب أن تجرب شيئًا بسيطًا مثل zoom:1
مع z-ondex.
أنا متأكد تمامًا (من ذاكرتي في التعامل مع مشكلة مماثلة) أن محاولة وضع الأشياء نسبيًا على رأس PNG في IE6 لا يعمل ، ولكن تحديد Z-Endex لا.