这回给大写共享的文章是分几篇依次不定期的发表出来的
希望对还在学习和有部分基础的童鞋有一定帮助！
第一篇我说一下关于IE6里大家都非常头痛的PNG透明图片，目前我知道在IE6里显示PNG图片的几种方式：
一个是将每个透明的图标或是图片分开来一张一张的存储，然后用IE特有的滤镜效果或是jQuery框架或是其他js框架开发出来的PNG透明的js代码，再或是单个的js文件写的PNG图片透明的代码，使PNG图片或是背景图在IE6下透明。
一个是将透明的图标或图片拼接到一张图里，然后再用CSS读取他们各自的坐标，而在IE6里，如果使用js写的PNG图片透明代码的话，这样读取图片或图标坐标时，我们会发现，这些图片都会错位一像素，所以要单独给IE6写一个滤镜样式例：*html em { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="http://www.anddesign.cn/images/publicBg.png"); background: none; }
这样之后，在ie6下的png背景图就会变成透明图片，可是这样的话我们在IE6下就不能读图片的坐标了，所以只能用外填充和内填充来将图片强行拉到我们要显示的区域，我在下面写一段演示代码，大家看一下。
em { display: block; width: 100%; height: 100%; }
em { background: url(‘http://www.anddesign.cn/images/publicBg.png’) no-repeat; }
*html em {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="http://www.anddesign.cn/images/publicBg.png"); background: none; }
.contentBg { overflow: hidden; width: 32px; height: 32px; }
.contentBg em { background-position: -100px -100px; }
*html .contentBg em { margin: -100px 0 0 -100px; padding: 100px 0 0 100px; }
这样的样式我在腾讯的网站上多有看到，大家可以去查看一下！但是这样的缺点比较多，写的兼容方式太多。并且滤镜那里的图片路径必须是连接到网上的图片，否则不以显示，还有就是如果要将这些图片做链接，在IE6下，鼠标必须移到有实色的地方才会触发热点，就是鼠标移到链接上会一闪一闪的，箭头与小手之间来换变换，我想到的办法就是生成一张透明的高宽一像素的GIF图片，然后将这张图片的大小拉到与该链接高宽一样，拿上面的代码当例子写一段代码吧。
.contentBg em img { width: 32px; height: 32px; }
一个是伪PNG图片（自己起的名字），在国内的淘宝，优酷，土豆等网站上都能看到，他的怪异之处是因为PNG图片里的图片模式是索引模式，意思就是图片还是GIF的，但是图片的格式是PNG的，做出来这样图片的流程是这样的（操作是在PS下），将拼接好的图片存储以WEB格式输出，然后选PNG8格式（帖子里有酷友说PNG8就是索引的PNG格式，所以修正一下），我到现在也没想明白是这为的是什么，是为了统一格式好调用吗，还是什么，如果知道的朋友，请告知一下，谢谢。
这样的情况下，就不用写什么兼容方式了，按以往的读取图片坐标的方式走就好了。但是这样的话，图片不是纯透明的，所以，还是没有解决掉根本问题。
还有一个是我这几天研究后发现的，不知道有没有朋友发现，所以我在这里讲一下。
注：第四种目前传到服务器上之后。ie6下会出现问题！图片不会显示，
http://www.zd178.com/zd178_look/iepngfix/ 用这个链接里的方法，可以更好的解决，之前有用过我这个方法的朋友，抱歉了！
还是拿一张拼接好的图片，准备一个js写的PNG图片透明代码，这里要说一下，拼接好的图片里的每个图片和图标，都要有一像素的间隔，我在这里写一段代码，大家就会明白了！
例：
div { display: inline; float: left; overflow: hidden; width: 20px; height: 20px; background: url('1.png') no-repeat; }
.a { background-position: 0 0; }
.b { background-position: -21px 0; }
*html .b { background-position: -20px 0; }
.c { background-position: -42px 0; }
*html .c { background-position: -41px 0; }
.d { background-position: 0 -21px; }
*html .d { background-position: 0 -20px; }
.e { background-position: 0 -42px; }
*html .e { background-position: 0 -41px; }
背景图：
我来讲解一下，我发现的是，IE6在加了js写的PNG透明图片代码后，读取PNG图片的位置会向上和向左偏移一像素，所以，以往我们把图标都紧紧的靠在一起是不合适的，所以要留下来一像素的间隔，让IE6和其他浏览器读取图片坐标的位置向上和向左减一像素，而向上和向左距离为0的就不用写兼容了，向上距离为0，向左有距离的图标要向左减一像素例：
.contentBg { background-position: -100px 0; }
*html .contentBg { background-position: -99px 0; }
向上有距离的要向上减一像素，向左距离为0 例：
.contentBg { background-position: 0 -100px; }
*html .contentBg { background-position: 0 -99px; }
向上和向左都有距离的图片，该怎么写，大家也就明白了吧？
这种写的方式有几种优点（自己觉得），不像第二种样式一样还要再写一个子级出来，并且不用写两个属性，也能在一定程度上减少代码量，加快CSS加载速度。
看不明白文字说明的，我还上传了四种写法的HTML文档，大家可以下载下来看一下。
第一弹就写这么多吧，表达能力有限，写的不怎么好，有不对的地方，希望大家都指点出来。
第二弹，第三弹，第四弹以后将不定期的发表，希望对大家有一定的帮助。
