مشكلات IE6 مع ملفات PNG الشفافة

Question

لقد اعتدت على فكرة أنني إذا كنت أريد/أحتاج إلى استخدام ملفات PNG alpha-trans بطريقة عبر المتصفحات، فإنني أستخدم صورة خلفية على div ثم، في CSS الخاص بـ IE6 فقط، أضع علامة على الخلفية كـ " لا شيء" وقم بتضمين وسيطة "التصفية" المناسبة.

هل هناك طريقة أخرى؟طريقة أفضل؟هل هناك طريقة للقيام بذلك باستخدام علامة img وليس مع صور الخلفية؟

Answer 1

خلاصة القول هي، إذا كنت تريد شفافية ألفا في PNG، وتريد أن تعمل في IE6، فأنت بحاجة إلى تطبيق مرشح AlphaImageLoader.

الآن، هناك طرق عديدة للقيام بذلك:اختراقات محددة للمتصفح، تعليقات مشروطة، تكرار عناصر Javascript/JQuery/JLibraryOfChoice، خدمة CSS من جانب الخادم عبر UserAgent-sniffing...

لكن كل ذلك يتعلق بتطبيق الفلتر وإزالة الخلفية.

Answer 2

إليك الحل المحدد الذي أحبه، باستخدام Javascript (jQuery):

http://jquery.andreaseberhard.de/pngFix/

من السهل الإضافة إلى موقع موجود، والتعامل مع جميع أنواع الصور (أزرار النماذج، والخلفيات، وعلامات IMG العادية، وما إلى ذلك)، ويترك CSS الخاص بك جميلًا ونظيفًا.

Answer 3

هذه هي الطريقة "الأفضل" على الأرجح.لكن ضع في اعتبارك أن الأمر لا يتعلق فقط بـ alpha-trans الذي لا ينفذه IE6 بشكل صحيح عندما يتعلق الأمر بملفات PNG؛مساحة اللون تالفة بسبب عدم قيام IE بتنفيذ جاما بشكل صحيح، وبالتالي تظهر ملفات PNG غالبًا "أغمق" مما ينبغي.
كان أحد "الحلول" البديلة التي قمنا بتنفيذها في مشروع حديث هو وضع علامة على كل صورة png بفئة "toGif"، في CSS يتم استدعاء السلوك المخصص .htc والذي يغير امتداد .png إلى .gif إذا كان المتصفح كذلك. تم اكتشاف أنها مشكلة وضعنا علامة عليها كمشكلة.نقوم فقط بتضمين نسخة GIF من كل PNG بجانبها في نفس المسار، وإذا تبين أن المتصفح لا يتعامل مع ملفات PNG بشكل صحيح، فإنه يستبدلها بنسخة GIF من الصورة.لذلك، فإننا نضحي بمزج ألفا لصالح الشفافية الكاملة المضمونة ودقة الألوان، ولا نفعل ذلك إلا عندما نعلم أنه من المحتمل ألا يبدو الأمر صحيحًا كما هو.
قد لا يكون هذا حلاً مثاليًا، ولكن أعتقد أن هذه هي طبيعة المتصفحات المشتركة.
يحرر:في الواقع، بعد أن ألقيت نظرة على المشروع المعني، استخدمنا سلوك .htc لفئة img تسمى "alpha" أيضًا والتي تقوم بإلقاء المرشح الصحيح على الصورة تلقائيًا.إذن، فأنت تكتشف أن المتصفح يستخدم جافا سكريبت بدلاً من اختراق CSS خالص لـ IE6 فقط، لذلك قد يكون الأمر أكثر أناقة قليلاً...لكنه في الأساس نفس الشيء.
للحصول على مقدمة لكيفية كتابة سلوكيات DHTML، حاول هذا الرابط.

Answer 4

أداة تحميل الصور هي الحل الوحيد المتاح لـ IE6.لاحظ أن دعم PNG الخاص به بدائي جدًا (جنبًا إلى جنب مع IE7 أيضًا)، ولا يمكنه التعامل بشكل صحيح مع الخلفيات الشفافة الحلقية.لقد تعلمت هذا بالطريقة الصعبة عندما حاولت تصميم موقع ويب بحاوية شفافة.عملت بشكل مثالي في فايرفوكس، بطبيعة الحال.

يجب أن يكون الإصلاح مناسبًا للمناطق الصغيرة من الخلفية وأي رسومات أمامية شفافة، ولكن مرة أخرى أنصح بعدم تصميم موقع ويب يستخدم كميات كبيرة من الشفافية مع Internet Explorer.

في النهاية، كان الحل هو عرض لون ثابت لـ IE، مع الاحتفاظ بالشفافية للمتصفحات الأخرى.لم يضر التصميم كثيرا في النهاية، لحسن الحظ.

Answer 5

هناك طريقة أخرى للتغلب على ذلك وهي استخدام صورتين منفصلتين، على سبيل المثال GIF وPNG الشفاف، واستهداف CSS الخاص بك وفقًا لذلك:

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

لا يفهم IE 6 محددات CSS الفرعية، لذا سيتجاهل القاعدة، في حين أن المتصفحات التي تفهمها ستمنحك صورة PNG شفافة لطيفة.

الجانب السلبي الوحيد هو أنه يجب أن يكون لديك صورتان منفصلتان وقد لا يبدو التصميم بالضبط نفس المتصفح المتقاطع ولكن طالما أنه لا يبدو معطلاً، فيجب أن تكون على ما يرام.

Answer 6

فيما يلي خياران لا يستخدمان مرشح AlphaImageLoader.

• DD_belatedPNG بواسطة درو ديلر:يستخدم حلاً يستند إلى VML بدلاً من مرشح AlphaImageLoader.
• PNGPong:حل يعتمد على الفلاش

بالنسبة لي، إذا كان إرسال ملف .gif متعقد إلى IE6 فقط غير ممكن، فأنا أستخدمه الألعاب النارية لإضافة لوحة ألوان متوافقة مع IE6 إلى ملف .PNG.

Answer 7

الحل المعتاد لعناصر img هو تغيير src للإشارة إلى صورة GIF شفافة بحجم 1 × 1 بكسل ثم استخدام نفس اختراق الفلتر.