zoukankan      html  css  js  c++  java
  • 关于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");
    View Code

      图中在background和filter加上横线,只有IE6能识别,其他IE版本并不识别(如果你的页面显示效果只有IE6有问题时,你可以用下划线CSS属性来单独定义IE6的CSS版本,做IE6的兼容),采用CSS方式,效率相对高一些,但是它不支持背景的平铺(repeat);

      ③运用JS插件:DD_belatedPNG.js (这是楼主采用的第二种方式,配合第一种方式完美解决PNG问题)

      首先,引入条件注释的DD_belatedPNG.js,只针对IE6;

    1 <!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->
    View Code

      其次,调用函数,加入要实现透明PNG的class名,id,或者其他标识;

      DD_belatedPNG.fix("#ID1,.Class,#ID2");  其中的写法就类似于Jquery的标识元素写法,支持#ID,.Class,Div Img 等方式;

      如果,元素过多,可以找个偷懒的办法,在DD_belatedPNG.js中添加如下代码:

    1 window.onload = function()
    2 {
    3      DD_belatedPNG.fix(".ClassName");
    4 }
    View Code

      最后,在需要实现透明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显示大图标。

     代码:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <style type="text/css">
     6         a
     7         {
     8             border: 2px #ccc solid;
     9         }
    10         img
    11         {
    12             border: 5px #ccc solid;
    13         }
    14     </style>
    15     <script type="text/javascript">
    16         function ShowPicFunc() {
    17             var ele = document.getElementById("img-big");
    18             ele.src = "../images/1_big.jpg";
    19             ele.title = "big";
    20         }
    21     </script>
    22 </head>
    23 <body>
    24     <div class="div-option">
    25         <a href="javascript:void(0);" onclick="ShowPicFunc();">
    26             <img id="img-small" alt="" src="../images/1_small.jpg" title="small" /></a>
    27     </div>
    28     <div class="div-show">
    29         <img src="#" id="img-big" title="" alt="" />
    30     </div>
    31 </body>
    32 </html>
    View Code

     效果展示:

                IE6效果展示                        IE7以上,Google,firefox效果

           

    原因:

      在IE6中a标签的href和onclick事件执行机制有点不太一样,当点击A标签,先响应了click事件,然后去href,但是href没有请求的地址,所以内部请求到一半就会终止,新图片的加载被aborted,该加载的东西就不会加载出来了,这就造成图片没有显示出来,或者只显示一半。其实这是IE6底层的一个bug,后来的IE已经解决了这个问题。

    解决方案:

      ①在上面代码中的单击事件改成这样:onclick="ShowPicFunc(); return false;" 个人觉得,虽然能解决,但是怎么看这代码就跟一坨什么似的。其实,可以将阻止默认事件的操作,直接定义在ShowPicFunc()方法内部,这种方式比较简单一些,如下所示:

    1 function ShowPicFunc() {
    2      var ele = document.getElementById("img-big");
    3      ele.src = "../images/1_big.jpg";
    4      ele.title = "big";
    5      window.event.returnValue = false;
    6 }
    View Code

      

      ②将a标签的控制操作,全部改成用div或者其他标签来代替,这种改动大小可想而知,如果项目中a标签的控制操作不多,可以参考本方法。

    总结:

      其实上面第一种方式,有一个知识点需要补充一下,就是window.event.returnValue = false;和return false;之间的区别;

      window.event.returnValue = false;取消默认事件的处理;如下代码,a标签的href链接地址就不会执行。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <style type="text/css">
     6         a
     7         {
     8             border: 2px #ccc solid;
     9         }
    10         img
    11         {
    12             border: 5px #ccc solid;
    13         }
    14     </style>
    15     <script type="text/javascript">
    16         function ShowPicFunc() {
    17             var ele = document.getElementById("img-big");
    18             ele.src = "../images/1_big.jpg";
    19             ele.title = "big";
    20             window.event.returnValue = false;
    21         }
    22     </script>
    23 </head>
    24 <body>
    25     <div class="div-option">
    26         <a href="http://www.baidu.com" onclick="ShowPicFunc();">
    27             <img id="img-small" alt="" src="../images/1_small.jpg" title="small" /></a>
    28     </div>
    29     <div class="div-show">
    30         <img src="#" id="img-big" title="" alt="" />
    31     </div>
    32 </body>
    33 </html>
    View Code

      

      不知道各位看官有没有这样的疑问,既然上面return false也可以实现阻止默认事件,为什么不将return false写在函数内部呢,这比window.event.returnValue = false;可简单多了啊,那就代码检验一下:

     1 <!DOCTYPE html >
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <style type="text/css">
     6         a
     7         {
     8             border: 2px #ccc solid;
     9         }
    10         img
    11         {
    12             border: 5px #ccc solid;
    13         }
    14     </style>
    15     <script type="text/javascript">
    16         function ShowPicFunc() {
    17             var ele = document.getElementById("img-big");
    18             ele.src = "../images/1_big.jpg";
    19             ele.title = "big";
    20             return false;
    21         }
    22     </script>
    23 </head>
    24 <body>
    25     <div class="div-option">
    26         <a href="http://www.baidu.com" onclick="ShowPicFunc();">
    27             <img id="img-small" alt="" src="../images/1_small.jpg" title="small" /></a>
    28     </div>
    29     <div class="div-show">
    30         <img src="#" id="img-big" title="" alt="" />
    31     </div>
    32 </body>
    33 </html>
    View Code

    从上可以看出这种方式是不可行的,由此可以得出结论:

      对于A标签来讲,onclick事件内部写函数名+return false方式可以阻止href事件执行,想当于window.event.returnValue=false作用,然而return false,写在函数内部只是作为返回值来处理,并不会阻止事件的执行;所以,return false写的位置不同,表示的含义是不一样的。

    总结

       由于项目中遇到IE6主要是这两个兼容问题,暂且写到这里,当然IE6兼容会有其他问题,等以后再遇到会另起博客发出,以此作为自己的参考,同时希望能帮助园里的朋友,如果园友发现本文中如有不当或者错误之处,欢迎各位指正,此文只为抛砖引玉,期待各位的不吝赐教。

      

  • 相关阅读:
    哈夫曼树
    MUI
    mui.init方法配置
    js中如何把字符串转化为对象、数组示例代码
    ( 转 )超级惊艳 10款HTML5动画特效推荐
    ( 转 ) 关于微信公众号,你不知道的15个小技巧
    h5预加载代码
    css3常用动画样式文件move.css
    iphone微信 h5页音乐自动播放
    sshpass: 用于非交互的ssh 密码验证
  • 原文地址:https://www.cnblogs.com/xilipu31/p/4151699.html
Copyright © 2011-2022 走看看