Just another WordPress weblog
Translate My Blog

DD_belatedPNG 一些bug的修正

<Date: 2011-11-16> <Author: > <Category: Uncategorized> 发表评论

很久之前在bolg发布了一篇ie6 png透明的帖子，用DD_belatedPNG这个js来实现，经过一段时间的使用发现存在很多的bug，尤其最近的项目，在ie6下面发现的bug尤其的多，所以想法解决解决，期间问了公司的大师同学和前前前公司的同事，把发现的问题都已经修正，以下列出的是用了belatedPNG在ie6中遇见的问题：

1，页面是用iframe载入的 。页面里面的用DD_belatedPNG， 在ie6下会出现空白一大片，但是是占位的。
2，页面中的png图片有版本号，在ie6会出现不透明情况。
3，做滑动门背景图是png 需要透明，在ie6下hover会出现背景跑到屏幕左上角。
4，a用absolute 背景用png ，在ie6 hover效果同上（这个问题是根据记忆，没有具体写demo去测试）
5，li>a>

在看了DD_belatedPNG的代码之后，发现1，3，4，5其实是同一个问题。

  1. giveLayout: function (el) {
  2.         el.style.zoom = 1;
  3.         if (el.currentStyle.position == 'static') {
  4.                     el.style.position = 'relative'
  5.                     };
  6.             }
  7.     }

看了这个代码发现 只要position没有设置那么 DD_belatedPNG.JS 就会把position设置为relative；
我只是加了一个判断 去除一些标签，修改如下

  1. giveLayout: function (el) {
  2.         el.style.zoom = 1;
  3.         if (el.currentStyle.position == 'static') {
  4.                 var tags=el.nodeName.toLowerCase();
  5.                 if(tags!='html' && tags!='a'&& tags!='img'){
  6.                     el.style.position = 'relative'
  7.                     };
  8.             }
  9.     }

这样修改 问题就解决了。
现在看第二个问题
2，页面中的png图片有版本号，在ie6会出现不透明情况。
下面是DD_belatedPNG 对判断是img的代码

  1. if (el.nodeName == 'IMG') {
  2.             if(el.src.toLowerCase().search(/\.png$/) != -1) {
  3.                 el.isImg = true;
  4.                 el.style.visibility = 'hidden';
  5.             }

这段只是匹配了这张图片是不是png，但是如果图片加了版本号例如：logo.png?v=1321303913 这样的图片在ie6下就不会透明，这个问题是同事大师帮忙修改的，修改如下：

  1. if (el.nodeName == 'IMG') {
  2.             if(/\.png(?:\W|$)/.test(el.src.toLowerCase())) {
  3.                 el.isImg = true;
  4.                 el.style.visibility = 'hidden';
  5.             }

以上的bug只是我用DD_belatedPNG在ie6下发现的问题，如果有哪位童鞋发现了别的问题并解决，希望告之，3Q

本文来自: DD_belatedPNG 一些bug的修正

, , , , , ,

ie6支持png透明的方法

<Date: 2010-03-15> <Author: > <Category: Uncategorized> 4 条评论

最近无论是在论坛上还是在群里，都有好多人问，ie6下怎么解决png透明的问题。我今天就说下我用什么方法解决吧。 我用的是一个叫DD_belatedPNG的js。 刚才特意的google了一下这个东西。以下是对这个东西说明和用法。

DD_belatedPNG使用了微软的VML语言进行绘制的JS实现,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜，而且还支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及，看到了吧，这玩意可是居家旅行杀人越货必备的好东西啊。

用法如下：

  1. 1. 下载JS文件，官网地址:http://www.dillerdesign.com/experiment/DD_belatedPNG/
  2. 2. <!--[if lte IE 6]>
  3. <script type="text/javascript" src="http://www.hxsd.com/news/zhuantipindao/090917sheying/script/dd_belatedpng.js"></script>
  4. <script>
  5.   DD_belatedPNG.fix('img');
  6. </script>
  7. <![endif]-->

.main为元素标识名称，多个元素之间用”,“隔开(逗号)，如DD_belatedPNG.fix(‘.png_bg，.main,#DD,.div ul li,img’); 这其中的元素都支持。

本文来自: ie6支持png透明的方法

, , ,

CSS解决未知高度垂直居中

<Date: 2010-03-15> <Author: > <Category: html> 发表评论

我们先来说一下 display:table-cell;这个属。
以下这段话，是我在搜索出来的摘自小龙女blog
display：table-cell 在css2中的定义只有简单的一句话“table-cell : 　 CSS2　将对象作为表格单元格显示”

css中有一个规则被称为“创建匿名表格元素的规则”，（以下文字整理自蓝色理想一篇文章），举例来说，如果某个元素已经被设置为“display:table- cell;”，而它的父节点（包含它的容器）没有被设置为“display:table-row;”属性，那么浏览器将会创建一个被设置为 “display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含，直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。

如果某个元素被设置为“display:table-row;”，而它的父节点没有被设置为 “display:table;”（或者“display:table-row-group;”），浏览器将会创建一个被设置为 “display:table;”的匿名盒对象来嵌套它，与之相邻的属性为“display: table-row;”的兄弟节点也都会被包含其中。同样，如果某个元素被设置为“display:table-row;”，但它的内部却缺少 “display:table-cell;”的元素，那么一个匿名的table-cell将会被创建，用来包含该table-row中的所有元素。

按照这个思路，display:table-cell;既然能按照表格单元格显示，那表格单元格的属性他也应该具有，于是我写了这样的一个例子

Tips:You can change the code before run.

测试浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2

本文来自: CSS解决未知高度垂直居中

,

position:absolute a对象无法选择问题

<Date: 2010-01-15> <Author: > <Category: html> 3 条评论

前几天，一个mm在群里面问一个问题：这样描述的，一个div里面放一张图片，一个a的大小为图片的大小定位在图片的上面。问题出现了，在FF下鼠标放在图片上有链接可以点，但是在ie6，ie7下 没有a的迹象。现在看一下dome。

Tips:You can change the code before run.

当时写这个dome的想法是 a在ie下被图片盖住了，然后给a加背景颜色看看效果。

Tips:You can change the code before run.

ie6 ie7 ff 都一致，a没有被图片挡住。 既然没有被挡住，就给背景颜色加透明度，透明度为0也可以。

Tips:You can change the code before run.

这个是我想出来的解决办法，一直不明白ie下为什么a加了背景色才可以触发layout。

本文来自: position:absolute a对象无法选择问题

, , , ,

展开关闭缓冲效果

<Date: 2010-01-11> <Author: > <Category: JavaScript> 4 条评论

又堕落了有一段时间了，没有认真学js。天天混日子，这段时间一直在做公司内部的系统，系统有一个换肤的功能，之前做的都是一个一个得摆在上面的，随着皮肤的增加，空间有限放不开了。一个同事说，做成百度换肤的那种，点击弹出层，点击关闭。于是我憋了一下午，终于把这个js写出来了。
想法很简单，就是判断div的display是否是显示的还是隐藏的，显示的动画和关闭的动画分别由formula()和close()控制，很简单很基础的一个js。效果大家看一下吧

Tips:You can change the code before run.

这个效果其实jquery 一个函数就搞定了，下面是效果 阅读这篇文章的其余部分

本文来自: 展开关闭缓冲效果

, , , ,

Hello world!

<Date: 2010-01-04> <Author: > <Category: Uncategorized> 发表评论

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

本文来自: Hello world!

无限循环滚动

<Date: 2009-10-31> <Author: > <Category: JavaScript> 2 条评论

向左滚

Tips:You can change the code before run.

阅读这篇文章的其余部分

本文来自: 无限循环滚动

,

商城商品展示的一种效果

<Date: 2009-10-26> <Author: > <Category: JavaScript> 2 条评论

最近在学习js，在捣鼓一些小的demo玩。 上周可可妞碰到个小问题。正好我之前写过。
先看下效果

Tips:You can change the code before run.

阅读这篇文章的其余部分

本文来自: 商城商品展示的一种效果

, ,

IE和FF背景图片居中的偏移差异

<Date: 2009-06-28> <Author: > <Category: 未分类> 3 条评论

今天在写一个专题页面，页面的背景宽度是1480px;

Tips:You can change the code before run.

阅读这篇文章的其余部分

本文来自: IE和FF背景图片居中的偏移差异

, , , ,

ceshi

<Date: 2009-06-24> <Author: > <Category: 未分类> 1 条评论
  1. <div id="append_parent"></div><div id="ajaxwaitid"></div>
  2.         <div id="menu">
  3.             <span class="avataonline">
  4.                             <cite><a class="dropmenu" id="viewpro" onmouseover="showMenu(this.id)">liuxinghonglei</a></cite>
  5.                 <a href="logging.php?action=logout&amp;formhash=484f70c0">退出</a>
  6.                         </span>

Tips:You can change the code before run.

本文来自: ceshi

Theme
Codename H Rev.74		Powered by
Wordpress		Hosted by
1and1		Feeds Provided by
FeedSky		Icons Designed by
FAMFAMFAM		Licensed under
Creative Commons		Copyright 2009
My Blog