اگر تاكنون از فایل‌های گرافیكی با فرمت PNG در طراحی صفحات وب خود استفاده كرده باشید، مطمئناً متوجه مشكل Internet Expelorer با این نوع فایل‌ها شده‌اید. IE نمی‌تواند آبجكت‌های گرافیكی با فرمت PNG (كه اكثر آیكون‌های تحت وب نیز دارای این فرمت هستند) را به صورت ترانسپارنت (Transparent) نمایش دهد و فضاهای خالی آن را با كادری رنگی پر می‌كند. این مشكل در IE، باعث به هم خوردن تعادل گرافیكی وب‌سایت و در نتیجه كاهش زیبایی و جذابیت آن برای كاربران می‌شود. در این مقاله می‌خواهیم راه‌حل مناسب و آسانی را برای حل این مشكل ارائه كنیم. برای رفع این Bug در IE از یك فایل جاوا اسكریپت استفاده می‌كنیم.
- Visual Studio را باز كنید و از منوی New گزینه File را انتخاب كنید.
- در بخش Categories از كادر New File كه باز شده است گزینه Web را انتخاب كنید.
- در بخش Templates از كادر New File گزینه Jscript File را انتخاب و دكمه Open را كلیك كنید.
- سورس كد زیر را در فایلی كه باز شده است وارد كنید.
- var arVersion = navigator.appVersion.split("MSIE") - var version = parseFloat(arVersion[1]) - - if ((version >= 5.5) && (document.body.filters)) - { - for(var i=0; i<document.images.length; i++) - { - var img = document.images[i] - var imgName = img.src.toUpperCase() - if (imgName.substring(imgName.length-3, imgName.length) == "PNG") - { - var imgID = (img.id) ? "id='" + img.id + "' " : "" - var imgClass = (img.className) ? "class='" + img.className + "' " : "" - var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " - var imgStyle = "display:inline-block;" + img.style.cssText - if (img.align == "left") imgStyle = "float:left;" + imgStyle - if (img.align == "right") imgStyle = "float:right;" + imgStyle - if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle - var strNewHTML = "<span " + imgID + ass + imgTitle - + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" - + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" - + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" - img.outerHTML = strNewHTML - i = i-1 - } - } - }
- از منوی File گزینه Save را انتخاب كنید.
- در كادر Save File نام pngfix را به عنوان نام فایل وارد كرده و دكمه Save را كلیك كنید.
- فایل pngfix.js را كه ایجاد كرده‌اید در بخش Root پروژه خود در Visual Studio كپی كنید.
- در تگ <Head> صفحاتی كه می‌خواهید فایل‌های PNG به صورت Transparent نمایش داده شوند این كد را وارد كنید:
- <!--[if lt IE 7.]> - <script defer type="text/javascript" src="pngfix.js"></script> - <![endif]-->