二流設計師的小筆記

解決 IE 6 瀏覽器 PNG 圖背景透明 / CSS 設定 - 方法一

相信許多人都有使用PNG圖片被 IE6 瀏覽器搞毛的經驗，以下就提供一種的解決辦法...

先麻煩到以下網址下載三個元件，分別為：blank.gif、iepngfix.htc、iepngfix_tilebg.js

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B7MwMLj7zfxqMDk2ZTNmMGUtOWNjNC00YTA0LTk0NzQtZWYyOWZlYTI4Y2Uw&hl=en_US

這三個元件先下載好放旁邊，待會兒會有幫助的...

步驟一：先用 Dreamweaver 開啟一個空白的 Html 檔。

步驟二：先在頁面中放一張背景透明 PNG 圖。

步驟三：放好圖片之後，將 html 檔做儲存，這邊取名為 index 

步驟四：之後開啟一個新檔案。

步驟五：新增一個 CSS 的文件。

步驟六：CSS 文件新增好之後，就會看到輸入指標落在第四行。

步驟七：在這邊key入下列語碼 ...

img,div {behavior: url("css/iepngfix.htc");}

步驟八：輸入完成後，儲存檔案到你指定資料夾 ( 這邊個人習慣取名CSS 資料夾，檔名：為” style “ )

步驟九：儲存完 CSS 檔之後，切換到 index.html 點選「 格式 → CSS 樣式 → 附加樣式表 」

步驟十：之後出現一個” 附加外部樣式表 ”的小視窗，這邊點選” 瀏覽 ”。

步驟十一：之後選取剛剛儲存的 CSS 檔，找到你儲存的位置，選取檔案按下” 確定 ”。   

步驟十二：再來就會看到” 附加外部樣式表 ”的路徑，就是剛剛選取的位置，之後按下” 確定 ”。

步驟十三：之後注意到語碼的第六行，出現了<link ...... 這行語碼，就是CSS 檔的連結。

步驟十四：再到本機檔案這邊” 按右鍵 ”新增一個資料夾，取名「 Scripts 」。

步驟十五：「 Scripts 」資料夾。

步驟十六：之後再將前面下載的三個檔案中的，iepngfix_tilebg.js 存放至 Scripts 資料夾。

步驟十七：之後點選「 插入 → HTML → Script 物件 → Script 」。

步驟十八：之後跳出 Script 小視窗，點選來源的資料夾按鈕，選擇剛剛放進 Script  的 iepngfix_tilebg.js  

步驟十九：選取 iepngfix_tilebg.js 之後，按下" 確定 "。

步驟二十：確認好 Scripts 檔的路徑之後，按” 確定 ”。

步驟二十一：之後就會看到 Scripts 的連結了，按下 ” 儲存 ” 檔案。

步驟二十二：前面步驟都做完後，再把剩下的二個檔案，blank.gif、iepngfix.htc 放至 CSS 資料夾內。

步驟完成：之後再用瀏覽器預覽看看，這邊是用IE Tester 做測試預覽。