关于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作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三 ...
随机推荐
- 在tomcat下部署工程
xx系统第一期工程完成,今天老大要我去部署系统,从来就没有在tomcat下部署过,一直都是在myeclipse下部署.启动.运行即可,所以这次遇到了几个问题,记录下来. tomcat启动 在安装tom ...
- 大叔也说Xamarin~Android篇~监听返回键,单击返回某个webView,双击退出
回到目录 这个操作在原生android里是很容易实现的,在xamarin里也不难,在activity里有方法OnKeyDown,我们只需要重写一下就可以了,然后通过webView重新加载到要返回的页面 ...
- struts2学习笔记之十三:自定义过滤器
Struts2的拦截器 1.Struts2的拦截器只能拦截Action,拦截器是AOP的一种思路,可以使我们的系统架构 更松散(耦合度低),可以插拔,容易互换,代码不改变的情况下很容易满足客户需求 其 ...
- [Maven]Eclipse插件之Maven配置及问题解析.
前言:今天在自己环境装了Maven环境, 并且安装了Eclipse插件, 在查找插件过程中确实遇到一些问题, 好不容易找到一个 却又有问题.装好了插件之后, 用Eclipse创建Maven项目却出现 ...
- TextView 显示内容时出现 ArrayIndexOutOfBoundsException 的解决方法(Android 4.1)
很久以前做的表情输入及显示,用的系统的SpannableString,完成后的代码在其他版本的Android手机上没有问题,但是在在4.1和4.1.1的手机上显示时,有概率出现程序崩溃的问题. 下面是 ...
- [java] 找出字符串中出现最多的字符和出现的次数
逛园子看到一童鞋做的华为上机题目,写来好长的代码,懒得看,感觉不可能这么难,于是动手敲了下. import java.util.Scanner; public class StringTest { / ...
- How Google TestsSoftware - A Break for Q&A
New material for the thisseries is coming more slowly. I am beginning to get into areas where I want ...
- Sqlserver 中exists 和 in
如图,现在有两个数据集,左边表示#tempTable1,右边表示#tempTable2.现在有以下问题: 1.求两个集的交集? 2.求tempTable1中不属于集#tempTable2的集? 先创建 ...
- JavaScript内存优化
JavaScript内存优化 相对C/C++ 而言,我们所用的JavaScript 在内存这一方面的处理已经让我们在开发中更注重业务逻辑的编写.但是随着业务的不断复杂化,单页面应用.移动HTML5 应 ...
- Unity内置的shader include files
Unity内置的shader include files:这些文件都以.cninc结尾, HLSLSupport.cginc:自动包含,一些跨平台编译相关的宏和定义. UnityShaderVaria ...