جمعه 1 آذر 1398 |  عضویت / ورود






[ بخش اصلی آموزشها | افزودن آموزش | داری بیشترین امتیاز | دارای بیشترین بیننده | جدیدترین نظرات ]

چگونه مشکل عکس‌های بدون بک‌گراند PNG را در IE6 حل کنیم؟



این آموزش مربوط است به موضوع طراحي صفحات وب که توسط Hamid در تاریخ: Thursday, 2010 September 23 ارسال شده است.   |   تعداد بازدید: 7045 بار   |   امتیاز متوسط: امتیازی داده نشده است


-----------------------------

اگر در طراحی یک صفحه، بخواهید ابتکار به خرج دهید و از عکس‌های PNG با بک‌گراند شفاف (Transparent) استفاده کنید، احتمالاً متوجه می‌شوید که همه چیز در مرورگرهای جدید مثل فایرفاکس و اپرا و حتی اینترنت اکسپلورر 7 به بعد، خوب پیش رفته است،‌ اما وقتی کار در مرورگر IE6 یا همان Microsoft Internet Explorer نسخه 6 نمایش داده می‌شود، بک‌گراند این عکس‌ها حذف نشده است و طرح کلی سایت حسابی ضایع شده است.

مثلاً به این صحنه دقت کنید:

صفحه مورد نظر ما در Firefox به صورت زیر دیده می‌شود:

http://tutorials.aftab.cc/web/ie6_png_bug_fix/ie6_png_bug_fix1.gif

اما همان صفحه در IE6 به این صورت:

http://tutorials.aftab.cc/web/ie6_png_bug_fix/ie6_png_bug_fix2.gif

همانطور که می‌دانید، IE6 یکی از بزرگ‌ترین دردسرهای طراحان وب است!

ضمن اینکه بسیاری از استانداردها را پشتیبانی نمی‌کند، اما به دلیل محبوبیت ویندوز XP و اینکه این مرورگر به طور پیش‌فرض روی ایکس‌پی‌های قدیمی وجود دارد، این مرورگر هم محبوب شده است و بسیاری از کاربران هنوز از آن استفاده می‌کنند! (بد نیست برای اینکه آماری از کاربران مورد نظر داشته باشید، این مطلب را مطالعه کنید: برخی آمار مفید در مورد بازدید کاربران از سایت شما (ویژه بحث طراحی وب) )

این مشکل به خاطر یک باگ کوچک در IE6 است که خوشبختانه می‌توان خیلی راحت آن را رفع کرد.

برای رفع این باگ، مراحل زیر را طی کنید:

1- ابتدا این فایل را دانلود کنید، آن را از حالت فشرده خارج کنید و روی سایت خود آپلود کنید.

2-یک فایل متنی با نام و پسوند ie.css ایجاد کنید و این کدها را داخل آن کپی کنید:

img { 
 behavior: url(iepngfix.htc); 
}

دقت کنید که:

- اگر آدرس فایل iepngfix.htc چیز دیگری است، آدرس آن را دقیق وارد کنید.

- فایل blank.gif و iepngfix.htc باید کنار هم باشند.

3- در هر صفحه‌ای که عکس png دارید، بالای صفحه، در بین تگ head باز و head بسته، این کدها را بنویسید:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />    
<![endif]-->

4- همین!

توجه: در آدرس‌دهی‌ها پیش‌فرض ما این بود که همه فایل‌ها (یعنی blank.gif و iepngfix.htc و ie.css و فایل html شما) در یک پوشه یا در روت سایت هستند. اگر پوشه‌بندی‌های شما متفاوت است، آدرس‌ها را درست و کامل وارد کنید.

اگر نیاز به توضیحات بیشتر در این زمینه دارید، می‌توانید به آدرس زیر مراجعه کنید:

http://www.twinhelix.com/css/iepngfix/

این هم لینکی دیگر و توضیحاتی بیشتر:

http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/

 

 

موفق باشید؛
حمید رضا نیرومند





ارسال سؤال یا نظر
Tutorials ©