HTML&CSS基礎-修復IE6對png24支持度不高的案例
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.IE6對png24支持度不高，則會導致透明度無法正常顯示
1>.HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ie6png的修復</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-image: url(img/05.png); background-repeat: no-repeat; } </style> </head> <body> <!-- 在IE6中對圖片格式png24支持度不高，如果使用圖片格式是png24，則會導致透明度無法正常顯示。 解決方案一: 可以使用png8來代替png24(使用PS工具轉一下格式即可)，即可解決問題，但是使用png8代替png24以后，圖片的清晰度會有所下降。 解決方案二: 使用JavaScript來解決該問題，需要向頁面引入一個外部的JavaScript文件，然后再寫一下簡單的JS代碼，來處理問題。 大致步驟如下: 在body標簽的最后引入外部的JS文件 再創建一個新的script標簽，並且編寫一些JS代碼。 --> <div class="box1"></div> <img src="img/05.png" /> </body> </html>
2>.瀏覽器打開以上代碼渲染結果
二.修復IE6對png24支持度不高的案例
1>.HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ie6png的修復</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-image: url(img/05.png); background-repeat: no-repeat; } </style> </head> <body> <!-- 在IE6中對圖片格式png24支持度不高，如果使用圖片格式是png24，則會導致透明度無法正常顯示。 解決方案一: 可以使用png8來代替png24(使用PS工具轉一下格式即可)，即可解決問題，但是使用png8代替png24以后，圖片的清晰度會有所下降。 解決方案二: 使用JavaScript來解決該問題，需要向頁面引入一個外部的JavaScript文件，然后再寫一下簡單的JS代碼，來處理問題。 大致步驟如下: 在body標簽的最后引入外部的JS文件 再創建一個新的script標簽，並且編寫一些JS代碼。 --> <div class="box1"></div> <img src="img/05.png" /> <!-- 以下代碼只會再IE6中執行，其它瀏覽器無效。 <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>: 表示引入修復IEpng24的js文件。 <script type="text/javascript">DD_belatedPNG.fix("div,img");</script>: 表示調用JS的代碼來修復"div"和img標簽中引用的png24圖片，如果由多個標簽就指定相應的標簽類型，並不推薦使用"*"號來指定所有標簽,最好顯式指定。 --> <!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript">DD_belatedPNG.fix("div,img");</script> <![endif]--> </body> </html>
2>.瀏覽器打開以上代碼渲染結果
