IE6 transparent png fix , การแก้ไข transparent png บน IE6
200922 May
IE6 transparent png fix , การแก้ไข transparent png บน IE6
วิธีที่ 1 ใช้ CSS+JS
เกริ่นก่อนว่าน่าจะ IE6 และ IE5.5 ในการมันจะไม่สามารถทำ transparent ไฟล์ png ได้เนื่องจากสามารถอะไรก้อไม่ทราบ แต่คิดว่าน่าจะเป็น bug ของ IE6 เอง ปัญหานี้จะไม่เกิดกับ IE7 หรือ version ที่ใหม่กว่า วิธีแก้ไขจะอธิบายคับ ด้านล่างนี้เริ่มแรกให้เราใส่ส่วนการตรวจสอบ IE version ใน HEAD ของ HTML ในการซึ่งมันจะถูกเรียกใช้ถ้า browser IE version ต่ำกว่า 7 ก้อจะมีการเีรียก pngfix.js
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
จากนั้นสร้างไฟล์ pngfix.js แล้ว code ด้านล่างนี้ไป paste แล้ว save
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 + imgClass + 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
}
}
}
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 + imgClass + 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
}
}
}
ยังมีวิธีอื่นไหมมีอีกคับใช้ CSS ก้อได้คับ
วิธีที่ 2 CSS fixed
ควรเขียนแยกไฟล์ CSS เรียกเฉพาะ IE versionต่ำกว่า 7 โดยใช้โดยอาจจะสร้างไฟล์ ie6.css อีกไฟล์
<span>อธิบายเพิ่มให้กระจ่าง </span>
<!--[if lt IE 7]>
<![endif]-->
lt คือ less than IE7 อธิบายให้ชัดเจน gt ก้อสามารถใช้ได้เช่นกัน
<!--[if lt IE 7]>
<![endif]-->
lt คือ less than IE7 อธิบายให้ชัดเจน gt ก้อสามารถใช้ได้เช่นกัน
<!--[if lt IE 7]>
@import "/resources/css/ie6.css";
<![endif]-->
@import "/resources/css/ie6.css";
<![endif]-->
img {# filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
}
วิธีที่ 3 JavaScript fix transparent png IE6
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
http://24ways.org/2007/supersleight-transparent-png-in-ie6
http://homepage.ntlworld.com/bobosola/pnghowto.htm ,




