前言

  对于程序员来说,一听到你做的程序必须兼容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兼容或者网页图片选择有一定帮助。

GIF、JPEG 和 PNG比较

如果在采用第三种js解决方案下出现任何问题,可以参考如下文章,由于该文概括的比较全,楼主就不重复造轮子了。

使用DD_belatedPNG的一些注意事项

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中做兼容的那点事。的更多相关文章

  1. css padding在ie7、ie6、firefox中的兼容问题

    padding 简写属性在一个声明中设置所有内边距属性. 说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边 ...

  2. 解决ie6中png图片格式不兼容问题

    在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...

  3. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  4. IE6 浏览器常见兼容问题 大汇总(23个)

    IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...

  5. 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

    ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明. 很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG ...

  6. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  7. IE6 浏览器常见兼容问题 大汇总(23个)[转载]

    IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...

  8. IE6 浏览器常见兼容问题 共23个

    1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...

  9. 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过?

    HTML5学堂 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过? IE6已经渐渐的开始退出浏览器的历史舞台.虽然当年IE6作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三 ...

随机推荐

  1. 目前流行的源程序版本管理软件和项目管理软件都有哪些?各有什么优缺点?以及Github的注册过程

    一.目前流行的源程序版本管理软件和项目管理软件有Microsoft TFS.GitHub.SVN.Coding等. 二.各有什么优缺点 三.在GitHub注册账户的过程 Microsoft TFS的优 ...

  2. 作业七:团队项目——Alpha版本冲刺阶段-08

    昨天进展:代码编写. 今天安排:代码编写.

  3. JavaScript思维导图—数组

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/

  4. Hello Mybatis 03 数据关联

    ResultMap 在实际的开发中,数据库不总是我们希望看到的样子.比如我们希望User的主键是id但是数据库偏偏喜欢叫它u_id,这样一来原先的resultType似乎就失效了,不带这么玩的,整个人 ...

  5. Ubuntu环境搭建系列—WPS/LAMP/Python篇

    由于篇幅不宜太长,所以就将此文分成了两部分,在第一部分中我们讲解了google-chrome(谷歌浏览器)的安装,jdk的环境配置,android开发的环境搭建.那么在第二部分中,位们将讲解的是金山W ...

  6. 修复Telerik reporting 在网页中使用时的样式

    在ASP.NET 网页或ASP MVC中嵌入Telerik Reporting时,报表出来的样式是有问题的,按扭的位置错位了. 在页面中引入以下CSS文件可以将报表样式修复从而回到正常的报表样式. . ...

  7. 在AWS中创建NAT节点

    NAT, Network Address Translation,即网络地址转换.当内部网络的主机想要访问外网,但是又不想直接暴露给公网,可以通过NAT节点来访问外网.这样做有两个好处,第一是内网的主 ...

  8. 消息队列-Kafka学习

    Kafka是一个分布式的消息队列,学习见Apache Kafka文档,中文翻译见Kafka分享,一个简单的入门例子见kafka代码入门实例.本文只针对自己感兴趣的点记录下. 1.架构 Producer ...

  9. 看stackoverflow大牛如何回答何时在ASP.NET中使用异步控制器?

    转载自博客园:http://farb.cnblogs.com/ 今天无意中看到stackoverflow上一个很好的问答,个人觉得很有价值,所以翻译过来和大家共享!希望大家能相互交流. 在ASP.NE ...

  10. 常用 sql

    一. sql 多个字段拼接 mysql:     1. concat函数  如果连接串中存在NULL,则返回结果为NULL:        例如: select concat('1','2','3') ...