关于IE6中做兼容的那点事。
前言
对于程序员来说，一听到你做的程序必须兼容IE6（当然主流浏览器肯定得兼容的），那颗滚烫的心瞬间哇凉哇凉的，但是有时，项目就要求这样，你也只能硬着头皮跟IE6来个亲密接触，最近正好做了个项目，关于兼容IE6，真是废了点功夫，特此记录一下，方便以后查阅，也方便以后园友遇到同样问题可以参考一下。
正文
I.png透明图片不支持透明。
简介：项目中运用一部分png图片，在IE7以上，火狐，谷歌均是正常显示，但在IE6中，PNG图片背景出现差异，有时纯黑，有时纯白，有时纯灰等等，而不是透明，经过一番查阅，才知IE6对PNG图片的支持不是很好，只能通过其他方式来弥补；
效果还原：
看过这几张图片，相信大家已经明显看出差异性；为什么会出现这种差异呢？也许下面这段话可以帮助各位理解一下。
PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF
格式出色很多，经常用的PNG格式一般为PNG-8或者PNG-24，PNG-24在IE6中处理比较麻烦一些，而且很容易出问题，所以在必须用PNG情况下，可以考虑用PNG-8格式，如果含有透明背景，再做相关兼容操作。
解决方案：
①将PNG图片改成GIF格式；这是最简单粗暴的方式，也是最有用的，不过GIF格式图片如果直接由PNG用PS转换会出现锯齿情况（楼主就是这样搞的，此为用到的方法之一>.<）,不过如果一开始就搞成GIF的，这对P图的人在精度方面要求高一些，GIF如果够大，很容易出现锯齿情况。
②运用滤镜Filter：
background:url(ImgURL) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ImgURL");
图中在background和filter加上横线，只有IE6能识别，其他IE版本并不识别（如果你的页面显示效果只有IE6有问题时，你可以用下划线CSS属性来单独定义IE6的CSS版本，做IE6的兼容），采用CSS方式，效率相对高一些，但是它不支持背景的平铺（repeat）；
③运用JS插件：DD_belatedPNG.js （这是楼主采用的第二种方式，配合第一种方式完美解决PNG问题）
首先，引入条件注释的DD_belatedPNG.js，只针对IE6；
<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->
其次，调用函数，加入要实现透明PNG的class名，id，或者其他标识；
DD_belatedPNG.fix("#ID1,.Class,#ID2"); 其中的写法就类似于Jquery的标识元素写法，支持#ID，.Class，Div Img 等方式；
如果，元素过多，可以找个偷懒的办法，在DD_belatedPNG.js中添加如下代码：
window.onload = function()
{
DD_belatedPNG.fix(".ClassName");
}
最后，在需要实现透明PNG的元素上面加上class名字即可；虽然多引用了一个js脚本，但是可以实现IE6兼容，效率也算可以。
当然，解决IE6下PNG透明还有一些其他方式，不过，在当前项目中，试验了其他方式并不太奏效，所以只介绍了认为实现方式较好的这三种。当然如果各位对IE6下的PNG兼容性还想多了解一些，可以参考一下下面的这个网址，这个算是比较全的。
http://www.w3cfuns.com/thread-297-1-1.html
也可以了解一下PNG，GIF，Jpg之间的区别，为以后做IE6兼容或者网页图片选择有一定帮助。
如果在采用第三种js解决方案下出现任何问题，可以参考如下文章，由于该文概括的比较全，楼主就不重复造轮子了。
II.a标签控制js动态加载图片或者弹出窗口用a标签关闭窗口后动态显示图片，图片不能正常显示
举例：页面加载时，在页面显示小图标，当鼠标点击在下面DIV显示大图标。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a
{
border: 2px #ccc solid;
}
img
{
border: 5px #ccc solid;
}
</style>
<script type="text/javascript">
function ShowPicFunc() {
var ele = document.getElementById("img-big");
ele.src = "../images/1_big.jpg";
ele.title = "big";
}
</script>
</head>
<body>
<div class="div-option">
<a href="javascript:void(0);" onclick="ShowPicFunc();">
<img id="img-small" alt="" src="../images/1_small.jpg" title="small" /></a>
</div>
<div class="div-show">
<img src="#" id="img-big" title="" alt="" />
</div>
</body>
</html>
效果展示：
IE6效果展示 IE7以上，Google，firefox效果
原因：
在IE6中a标签的href和onclick事件执行机制有点不太一样，当点击A标签，先响应了click事件，然后去href，但是href没有请求的地址，所以内部请求到一半就会终止，新图片的加载被aborted，该加载的东西就不会加载出来了，这就造成图片没有显示出来，或者只显示一半。其实这是IE6底层的一个bug，后来的IE已经解决了这个问题。
解决方案：
①在上面代码中的单击事件改成这样:onclick="ShowPicFunc(); return false;" 个人觉得，虽然能解决，但是怎么看这代码就跟一坨什么似的。其实，可以将阻止默认事件的操作，直接定义在ShowPicFunc()方法内部，这种方式比较简单一些，如下所示：
function ShowPicFunc() {
var ele = document.getElementById("img-big");
ele.src = "../images/1_big.jpg";
ele.title = "big";
window.event.returnValue = false;
}
②将a标签的控制操作，全部改成用div或者其他标签来代替，这种改动大小可想而知，如果项目中a标签的控制操作不多，可以参考本方法。
总结：
其实上面第一种方式，有一个知识点需要补充一下，就是window.event.returnValue = false;和return false；之间的区别；
window.event.returnValue = false;取消默认事件的处理；如下代码，a标签的href链接地址就不会执行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a
{
border: 2px #ccc solid;
}
img
{
border: 5px #ccc solid;
}
</style>
<script type="text/javascript">
function ShowPicFunc() {
var ele = document.getElementById("img-big");
ele.src = "../images/1_big.jpg";
ele.title = "big";
window.event.returnValue = false;
}
</script>
</head>
<body>
<div class="div-option">
<a href="http://www.baidu.com" onclick="ShowPicFunc();">
<img id="img-small" alt="" src="../images/1_small.jpg" title="small" /></a>
</div>
<div class="div-show">
<img src="#" id="img-big" title="" alt="" />
</div>
</body>
</html>
不知道各位看官有没有这样的疑问，既然上面return false也可以实现阻止默认事件，为什么不将return false写在函数内部呢，这比window.event.returnValue = false;可简单多了啊，那就代码检验一下：
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a
{
border: 2px #ccc solid;
}
img
{
border: 5px #ccc solid;
}
</style>
<script type="text/javascript">
function ShowPicFunc() {
var ele = document.getElementById("img-big");
ele.src = "../images/1_big.jpg";
ele.title = "big";
return false;
}
</script>
</head>
<body>
<div class="div-option">
<a href="http://www.baidu.com" onclick="ShowPicFunc();">
<img id="img-small" alt="" src="../images/1_small.jpg" title="small" /></a>
</div>
<div class="div-show">
<img src="#" id="img-big" title="" alt="" />
</div>
</body>
</html>
从上可以看出这种方式是不可行的，由此可以得出结论：
对于A标签来讲，onclick事件内部写函数名+return false方式可以阻止href事件执行，想当于window.event.returnValue=false作用，然而return false，写在函数内部只是作为返回值来处理，并不会阻止事件的执行；所以，return false写的位置不同，表示的含义是不一样的。
总结
由于项目中遇到IE6主要是这两个兼容问题，暂且写到这里，当然IE6兼容会有其他问题，等以后再遇到会另起博客发出，以此作为自己的参考，同时希望能帮助园里的朋友，如果园友发现本文中如有不当或者错误之处，欢迎各位指正，此文只为抛砖引玉，期待各位的不吝赐教。
关于IE6中做兼容的那点事。的更多相关文章
- css padding在ie7、ie6、firefox中的兼容问题
padding 简写属性在一个声明中设置所有内边距属性. 说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边 ...
- 解决ie6中png图片格式不兼容问题
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...
- jquery博客收集的IE6中CSS常见BUG全集及解决方案
今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...
- IE6 浏览器常见兼容问题 大汇总（23个）
IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...
- 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)
ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明. 很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG ...
- IE6中CSS常见BUG全集及解决方案——摘自网友
IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...
- IE6 浏览器常见兼容问题 大汇总（23个）[转载]
IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...
- IE6 浏览器常见兼容问题 共23个
1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...
- 那些盒模型在IE6中的BUG们，工程狮的你可曾遇到过？
HTML5学堂 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过? IE6已经渐渐的开始退出浏览器的历史舞台.虽然当年IE6作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三 ...
随机推荐
- Java多线程19：定时器Timer
前言 定时/计划功能在Java应用的各个领域都使用得非常多,比方说Web层面,可能一个项目要定时采集话单.定时更新某些缓存.定时清理一批不活跃用户等等.定时计划任务功能在Java中主要使用的就是Tim ...
- Programming Erlang 学习笔记(一)
入门 启动Shell 在cmd中输入命令”erl”,百分号(%)表示一个注释的开始,从百分号开始到这行结束的所有文本都被看做是注释. 一个完整的命令需要以一个句点和一个回车结束. 退出erlang的命 ...
- Oracle存在修改，不存在插入记录
接触编程以来,在数据存储方面一直用的MS SQL.Oracle这名字对我来说是如此的熟悉,但是对其内容却很陌生,最近公司的一个项目用起了Oracle,所以也开始高调的用起了Oracle.在没有接触Or ...
- ECMAScript5 Object的新属性方法
虽然说现在并不是所有的浏览器都已经支持ECMAScript5的新特性,但相比于ECMAScript4而言ECMAScript5被广大浏览器厂商广泛接受,目前主流的浏览器中只有低版本的IE不支持,其它都 ...
- 跟我一起云计算（3）——hbase
hbase HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Go ...
- Visual Studio 2015速递(3)——ASP.NET 新特性
系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...
- 我心中的核心组件（可插拔的AOP）~消息组件~完善篇
回到目录 为什么要有本篇文章 本篇文章主要实现了RTX消息生产者,并且完成了整体的设计方式,之前在设计时消息生产者全局使用单一的生产方式,即一个项目里使用了Email就不能使用SMS,这种设计方法和实 ...
- 知方可补不足~UPDLOCK更新锁的使用
回到目录 对于高并发的场合下,使用UPDLOCK可以有效的控制并发更新的问题,即当一个线程在进行with(UPDLOCK)并进行update时,另一个线程将被阻塞,它会等第一个线程更新结束后,才可以进 ...
- 更新日志 - fir.im Jenkins & Gradle 插件上线
最近 fir.im 工程师们效率爆表,fir.im 实用工具集合又添加了新的成员-- Jenkins & Gradle 插件,让 App 打包上传更加简单快速. fir.im Jenkins ...
- PNG使用技巧 PNG的使用技巧
PNG的格式和透明度 这个Fireworks会比较清楚,打开Fireworkd优化面板,可以清楚看到png有3种不同深度的格式:png8.png24.png32. 其中,在优化面板选择png8,可发现 ...