讓IE支援PNG透明圖的方法
總之就是讓 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)
推
03/24 14:38, , 1F
03/24 14:38, 1F
推
03/24 14:43, , 2F
03/24 14:43, 2F
→
03/24 14:44, , 3F
03/24 14:44, 3F
推
03/24 14:50, , 4F
03/24 14:50, 4F
推
03/24 14:58, , 5F
03/24 14:58, 5F
推
03/24 14:59, , 6F
03/24 14:59, 6F
推
03/24 14:59, , 7F
03/24 14:59, 7F
推
03/24 15:36, , 8F
03/24 15:36, 8F
→
03/24 15:37, , 9F
03/24 15:37, 9F
推
03/24 15:49, , 10F
03/24 15:49, 10F
推
03/24 15:50, , 11F
03/24 15:50, 11F
推
03/24 15:52, , 12F
03/24 15:52, 12F
→
03/24 15:52, , 13F
03/24 15:52, 13F
推
03/24 17:36, , 14F
03/24 17:36, 14F