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


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

先麻煩到以下網址下載三個元件,分別為:blank.gifiepngfix.htciepngfix_tilebg.js

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

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


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


01.jpg 


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


02.jpg  


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


03.jpg   


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


04.jpg  


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


05.jpg 


步驟六:CSS 文件新增好之後,就會看到輸入指標落在


06.jpg  


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


 

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

 


07.jpg 


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


08.jpg   


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


09.jpg  


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


10.jpg 


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


11.jpg   


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


12.jpg   


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


13.jpg  


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


14.jpg  


步驟十五: Scripts 」資料夾。


15.jpg  


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


16.jpg   


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


17.jpg 


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


18.jpg  


步驟十九:選取 iepngfix_tilebg.js 之後,按下" 確定 "


19.jpg  


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


20.jpg  


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


21.jpg    


步驟二十二:前面步驟都做完後,再把剩下的二個檔案,blank.gifiepngfix.htc 放至 CSS 資料夾內。


22.jpg  


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


23.jpg  

全站熱搜

jun431869 發表在 痞客邦 留言(0) 人氣()