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>.浏览器打开以上代码渲染结果