[Hacks] 讓你的 IE 變正常 - PNG 透明 - :hover 效果(2008/5/5更新)

要寫這篇時,光是標題,我就想了好久,一直想不出要怎麼下這個標題,很難用一句話來形容這個爛東西,後來又回到我要介紹這個好用的 JavaScript library 作者的網站,看到他下的標題 A JavaScript library to make MSIE behave like a standards-compliant browser. 我看了後,就覺得"讓你的 IE 變正常"應該是這個作者的初衷吧!

IE 是個讓設計師很頭疼的產物,總是可以讓設計師有很多事跟工作做的產物,為了 IE ,一個 CSS 檔必須寫出多種不同 IE 使用的版本或是語法,而明明就是標準的 CSS 也會有一堆的語法在 IE 裡不被支援,而 png 檔,這麼好用的檔案,也不支援,還有一堆罄竹難書的事。

好啦!回到正題,IE 的行為修正檔,我想在網路上一大堆,但是這個作者寫的修正檔是我看過以及使用過最完整,而且目前也還沒發現任何 Bug ,我目前也有搭配 jQuery 的 FrameWorks 一起使用,目前是還沒遇到問題,如果有,我會再回來報告使用情況。

使用方式很簡單,只要將作者寫好的 JavaScript 檔,引用到文件中,就可以生效了,其它什麼動作都不需要,檔案有二個,一個是將所有 IE 修正成為跟 IE7 一樣的行為,另一個是 IE8 ,但是目前 IE8 的瀏覽器也還在 Beta 版的階段,我想應該是不太需要使用,因為使用者還不多,也不會有使用者使用 Beta 版的瀏覽器做為主要上網的工具吧!

步驟一:請先下載 IE7.js or IE8.js
步驟二:再使用下列語法即可(貼入到<head></head>)

IE7.js
將 IE5-6 修正成跟 IE7 相同

<!--[if lt IE 7]>
<script src="IE7.js" type="text/javascript"></script>
<![endif]-->


IE8.js
將 IE5-7 修正成跟 IE8 相同(記得 IE8.0 還在測試階段,不建議你使用)

<!--[if lt IE 8]>
<script src="IE8.js" type="text/javascript"></script>
<![endif]-->


你將 js 檔放入你的網站後,再引用上述的語法,就可以開始輕鬆的寫網頁啦,使用這個方法只有一個問題,那就是使用者如果將 JavaScript 的功能關閉,那你的網頁就會破功啦!但是現在沒使用 JavaScript 的人少之又少,這算是最好最偷懶的方式之一囉。

2008/4/22更新

經過 Jason 的提醒,原來這個修正檔還是不能使 png 檔完全正常顯示,我後來不死心,又去找了一些資料,都是一樣,不行就是不行,目前所有的修正檔都是只要背景使用PNG透明格式,那麼背景可以透明,但是就不能重覆,原因是出在 progid:DXImageTransform.Microsoft.AlphaImageLoader 這一支函式的問題,要使用它才能把PNG透明格式轉成透明的GIF格式,但是卻不支援重覆的屬性,所以我看,IE要完整支援PNG大概是沒望了。

還有,如果你有使用修正檔,不管是那一支,大多會有以下的幾個問題:
1. PNG背景圖位置定位失效及重複背景圖不能使用。
2. 超連結不能正常使用(這個會發生在
透過修正檔讓PNG圖片背景可以透明時,這時使用PNG為 背景圖的div這個區塊內的超連結都會點不到)。
3. 圖片一定要指定圖檔的寬和高,否則圖檔的顯示會有問題。
4. 有些會要求一定要符合某些檔名規範(使用起來不順手)。
5. 在IE6中圖位置更動時,會造成某些元件的顯示不正常(如這個網站下部份的範例http://clientside.cnet.com/
6. 我還沒想到,不過應該是還有的啦!

還有IE也不支援 a 以外的屬性使用 hover,這也很爛,還有不支援子選取器.....等,不過可以使用我介紹的這支,它可以修正這些問題,如果單純使用PNG的修正檔,我想大多數都差不多,只差在上述的問題,你比較討厭決解什麼問題,不然我還是推目前這支,即可以修正PNG還可以順便修正其它IE的問題,一兼二顧是吧!

如果只是要修正PNG的話,那除了 IEPNGFix 不錯外,也可以試試這支 jquery.pngFix.js ,這支看名字應該就知道是使用最近很火熱的 jQuery(什麼不知道,快去查查吧!)所開發,也是針對PNG透明問題的修正檔,執行效能也很不錯,使用也很簡單,網站最後面有教你,只要三個步驟,而且不需要特別的檔名,只要是PNG就可以了。

有新的發現,我會再回來補充的,請隨時注意囉!


2008/5/5更新

我今天又發現了一個修正 PNG 透明背景的修正檔,這個檔案跟其它的修正做的事差不多,只是它用的是現在很流行執行效能也很好的 Jquery ,所以我想這個東東應該效能也會不錯吧~

我還沒試,有空再來試試,我一樣會回來補充地。
http://jquery.andreaseberhard.de/pngFix/



- 看不懂上面 [if lt IE 8] 的語法,你可以參考這一篇詳細說明
- 原始網站
- Demo 及測試頁面(原作者做的相當的完整而且易懂,我就不再做範例囉)
- JS 檔直接下載(我將二個JS檔壓縮在一起了)

10 Comments:

匿名 提到...

蕃茄腦袋好
這個Hack
半透明PNG還是不能使用於背景耶..
而且要成功使用於背景
要指定他所要求的檔名格式
還只能一張不能重覆
還是我不會用.
蕃茄教教偶...

蕃茄 (Tomato) 提到...

真的嗎?背景只能有一張哦!我待會試試
至於檔名的部份,如果你不在乎效能的問題,你可以到 IE7.js 裡,尋找 -trans 字串,找到把它刪了就可以了,至於背景的部份,我明天找時間測,有結果再跟你說。

hugo 提到...

為什麼我連png放進去..都不能alpha透明呢..
hugo

蕃茄 (Tomato) 提到...

hugo 你的 png 檔不能透明,是不是檔名後面沒有加上 --trans 的名稱,或是到 IE7.js 裡,尋找 -trans 字串,找到把它刪了就可以了,如果不是這個問題,我目前是沒遇到不能透明的情形耶,你可以把 png 檔,寄給我試試看嗎?

蕃茄 (Tomato) 提到...

jason~
我想關於 png 透明圖,要在 IE6 中使用背景而且要重覆的問題,我想因該是無解了,可能真的要到 IE7 以後才能解決這個問題了。
還有,如果只想單純的使用 png 透明圖,也可以使用 IEPNGFix 這個 htc 修正檔。

還有其它補充,我會放在這篇文章的最後面,如果將來還有更好的修正檔,我也會回這篇繼續補充的。

Jason 提到...

蕃茄兄
嗯..我想也是..
我測試了好多的Fix
也有找到iepngFix
測試結果..要用在背景圖
圖檔必需要-trans.png
如果是一般插入影像就不用
看來重覆背景,只能等看有沒有更好的Fix
不然就是等沒人用IE6了
只是不知要等到何時呀...

蕃茄 (Tomato) 提到...

沒錯~不知道要等到何時。

不過使用 png 的修正檔也會有一些延伸性的問題(請看文章),但是還好大多數使用時背景不需要重覆,大多是文字換圖,背景如果需要透明就使用背景色加背景圖大多也可以解決,只是如果有更好的方法(使用 PNG),何必使用 Gif 呢?

只有期待 IE6 的時代趕快過去吧!

TS網路空間 提到...

蕃茄老師好,
感謝您的分享與指導
我也應該來回報一下我的練習(我也有認真試喔)
IE6---半透明插圖OK
IE6---背景半透明圖OK,
當然它如您們所說不會重覆, 只有出現一次
非常感謝!!!

Tsuiling

蕃茄 (Tomato) 提到...

Tsuiling~
多練習,找問題,下次遇到問題時,你就像個高手一樣,什麼都有辦法解決哦~

hugo 提到...

陳老板。。你今天告訴我說
用IE7.js就可以讓IE6 和IE7 一樣
為什麼我弄了。。還是不行呀。。
為什麼我怎麼都和你不一樣呀。。
真是天呀。。。

 
© 2008 Blogger Template Layout Design by [ Fanchie AirHead ]