نظرًا لأن لدي بعض مهارات إنتاج صفحات الويب، فقد سمعت منذ وقت طويل أن ملفات PNG الشفافة ستواجه مشكلات في العرض ضمن IE6، ولكن بما أنني لم يكن لدي موقع ويب خاص بي من قبل، لم أواجه ذلك مطلقًا.
لقد بدأت في إنشاء موقع الويب الخاص بي في بداية هذا العام. لقد استخدمت صورة بتنسيق png مع جزء شفاف لإنشاء شعار موقع الويب، واعتقدت أنها قديمة بما يكفي ولم تكن هناك حاجة إلى التفكير في IE6. في أحد الأيام عندما عدت من العمل وفتحت الواجهة الخلفية لبرنامج Google Analytics، اكتشفت أن زيارات IE6 تمثل في الواقع 40% من إجمالي الزيارات، لقد صدمت وقمت بسرعة بتنزيل الإصدار الأخضر من IE6 من الإنترنت لاختبار موقع الويب الخاص بي كما هو متوقع، كان الشعار معتمًا تمامًا.
لذلك بحثت عبر الإنترنت طوال الليل عن حلول بشكل عام، الطرق عبر الإنترنت معقدة نسبيًا، بما في ذلك مرشحات CSS وJS واستبدال GIF وما إلى ذلك. لكنني شعرت دائمًا أنها لم تكن جميلة بدرجة كافية. أخيرًا، بعد ليلة من البحث، وجدت طريقة لا تتطلب سوى جملتين من كود js لحل المشكلة بسلاسة. دعونا نشاركها معك بعد ذلك
أولاً، قم بتنزيل iepng.js من موقع الويب الخاص بي
http: //www.*** .com/templates/default/js/iepng.js
إذا كان معرف العنصر لموقع الويب الخاص بك يستخدم صورة png شبه شفافة كخلفية هو شعار، فأضف ما يلي بين
:| |
أخيرًا، اسمحوا لي أن أشرح، إذا كنت تستخدم ملف png شفاف كخلفية لـ div id foo، فيجب كتابته على النحو التالي:
| EvPNG.fix('#foo'); |
إذا كنت تستخدم ملف png شفاف كخلفية لفئة الشريط div، فيجب كتابته على النحو التالي:
| EvPNG.fix('.bar"); |
بناء الجملة هو نفس CSS، حسنًا، آمل أن أستمر في تبادل مهارات بناء مواقع الويب معك.
تم إنشاء هذه المقالة في الأصل بواسطة Wang Zai، مدير موقع Tianniu.com (www.hers99.com)، يرجى الإشارة إلى المصدر عند إعادة الطباعة.