在專案中遇到一情況讓困擾了半天,同一張PNG8圖片為何部份圖示在IE6中消失呢?當時一度懷疑是cache或hosts問題反覆複開關瀏覽器結果依然無效,連番測試終於找到了原因。
問題在於PNG8圖片本身,以下l範例模擬了當時情況,當使用IE6來瀏覽的會發現第二行的4個圖示隱形了。 Demo
原來下面的4個圖示被調了90%的」Alpha透明度」(FW在匯出PNG8的時能保留「Alpha透明度」PS則做不了這一點)。
而被Alpha半透明的圖示在一般瀏覽軟體或FF、Chrome、Safari、Opera、IE7以上瀏覽器都可以正常瀏覽,唯獨是IE6。
其實也有辦法讓IE6支援PNG8的“Alpha透明度”,方法與PNG32的IE濾鏡一樣。 Demo
從來上面結果得知原來是png8「Alpha透明度」闖的禍。而這次PNG8不同於png32的是,不支援png半透明的瀏覽器(如ie6)會自動降級到全透明(像gif那樣),而不是像png32那樣會有一個灰色的背景。