作者mdfh (您真內行)
看板Web_Design
標題讓IE支援PNG透明圖的方法
時間Fri Mar 24 13:47:45 2006
總之就是讓 IE可以使用PNG的透明圖檔 Firefox的話則是本來就支援
讓網頁的設計更加自由 (我自己是這樣覺得啦 以前都被卡在gif不是0% 就是100%)
據說IE7.0就會支援，但是MS打死不出正式版
原始網站 名稱就叫做IE7 XD
http://dean.edwards.name/IE7/
這個javascript還有很多功能，但是對一個純網頁設計的人來講 這算最實用啦
其他的就留給版上高手來研究了...
把他抓回來後 全部都丟到一個資料夾內
(建議這麼作，因為一開始我想要節省空間，只丟可能要用的 js檔，但是怎麼搞都不成功)
然後在需要用到的頁面<head> ... </head>之間加入這樣
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="
js/ie7-standard-p.js" type="text/javascript" /></script>
<script src="
js/ie7-graphics.js" type="text/javascript" /></script>
<![endif]-->
我在這裡是丟進 js的資料夾，所以如果用其他名稱要改一下
這樣便可以成功使用PNG的透明圖
不過在程式預設中， png的檔名要有 -trans 才會生效
例如 menu-trans.png
如果想要自由的檔名 就把剛剛那第一行改成
<script src="js/ie7-standard-p.js" type="text/javascript" />
IE7_PNG_SUFFIX = ".png";
</script>
當然第二行要保留
開使用沒多久後，發現有個問題 圖片會隨機的"縮起來" 不一定會發生
就像是原本 400*20px的圖變成 10*20那樣
這是因為我沒有為圖片設定寬高的關係
所以只要加上CSS設定寬高就OK
ex: <img src="123.png" style="width: 400px; height: 20px;" />
目前用起來是沒有甚麼問題，因為手上沒有舊版IE所以也不能試多少版以上才能用
這是我用這個方法做的網站(藉機打廣告XD)
http://www.ba.ncu.edu.tw/bacamp/2006/index_2.html
出問題的話...直接拆這個網站的原始碼來看吧(遮臉)
另外還有一個不知道算不算bug的小問題
如果習慣用外部連結 .css檔案
他會讀不到 a:hover { ... } 的資訊，必須要寫在每個網頁檔...
這裡還有一個國內網友寫的解決方法
http://0rz.net/51198
原理差不多，還有懶人產生器 但是比較適合在弄mark時用
--
垂死病中驚坐起 笑問客從何處來
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.115.200.224
※ 編輯: mdfh 來自: 140.115.200.224 (03/24 13:52)
※ 編輯: mdfh 來自: 140.115.200.224 (03/24 13:55)
1F：推 gckenny:以前有用，後來決定IE不支援的東西還是別讓他出現比較好 03/24 14:38
2F：推 ileadu:十分奇怪，我的png透明圖連 IE6都支援啊 03/24 14:43
4F：推 ileadu:真搞不懂為何要做出這麼多複雜的動作 03/24 14:50
5F：推 ileadu:... 你該不會是說「漸層透明」吧？ 03/24 14:58
6F：推 mdfh:是的 而且你那張logo是 GIF偽裝的... 03/24 14:59
7F：推 gckenny:有裝過IE7嘛？記得IE7移除後IE6會莫名其妙的支援了...囧 03/24 14:59
8F：推 gckenny:忘了說，原po提供的demo網站看起來似乎怪怪的...XD 03/24 15:36
10F：推 mdfh:你的螢幕太大了 XD 我只有做到 1024*768... 03/24 15:49
11F：推 ileadu:如何分辨是否為GIF偽裝呢？ 03/24 15:50
12F：推 mdfh:用photoshop打開後 如果layer那裡顯示index color 就是GIF 03/24 15:52
13F：→ mdfh:當然還是png圖檔 只不過是用gif的格式來處理之類的 03/24 15:52
14F：推 Azelight:index color 也是可以加入半透明圖層的但是很少軟體支援 03/24 17:36