"咳! 哎!.....  :-( "

你听见了么? 这些都是大家抱怨IE6下不能实现png图片漂亮的明效果的哀叫声,的确是无奈呀.....

不过现在幸运的是,我们能够让这一切的抱怨都停止.

网络上解决IE6下Png透明解决方案有很多,例如 IE PNG Fix from TwinHelix, Javascript IE PNG Fix, Transparent PNGs in Internet Explorer 6 from 24 ways.等等.
然而现在,我要和你分享的是 Unit PNG Fix.

因为它的确是太出众了.

1.非常小的javascript文件:1kb!
2.解决因为IE的滤镜属性所带来的影响.
3.无论是img元素或background-image属性,都能有效果.
4.在加载页面之前就能自动运行.或者就一丁点的元素.
5.允许自动高宽.
6.使用起来超级简单.

More »

Tags ： png, png, png, ie6, ie6, ie6, 透明, 透明, 透明, 推荐, 推荐, 推荐, png, png, png, ie6, ie6, ie6, 透明, 透明, 透明, 推荐, 推荐, 推荐, png, png, png, ie6, ie6, ie6, 透明, 透明, 透明, 推荐, 推荐, 推荐

演示效果就不放了，和系统冲突，很好用，你懂的
input：

More »

Tags ： 点击, 点击, 点击, input, input, input, textarea, textarea, textarea, 鼠标, 鼠标, 鼠标, 提示, 提示, 提示, 点击, 点击, 点击, input, input, input, textarea, textarea, textarea, 鼠标, 鼠标, 鼠标, 提示, 提示, 提示, 点击, 点击, 点击, input, input, input, textarea, textarea, textarea, 鼠标, 鼠标, 鼠标, 提示, 提示, 提示

10要点解决IE6兼容性问题

1、使用声明
你必须经常在html网页头部放置一个声明，推荐使用严格的标准。例如

最后你需要是IE6进入兼容模式，这已经足够兼容了。

More »

Tags ： 兼容, 兼容, 兼容, ie6, ie6, ie6, 浏览器, 浏览器, 浏览器, 兼容性, 兼容性, 兼容性, 兼容, 兼容, 兼容, ie6, ie6, ie6, 浏览器, 浏览器, 浏览器, 兼容性, 兼容性, 兼容性, 兼容, 兼容, 兼容, ie6, ie6, ie6, 浏览器, 浏览器, 浏览器, 兼容性, 兼容性, 兼容性

浮动，从诞生那天起，它就是个特别的属性——既为网页布局带来新的方法，却又随之产生一系列的问题。当然，随着时间的推移，这些问题终究有了一些出色的解决方案，Kayo 要在这里详细介绍的，除了是这些解决方案，还有其中的原理。（温謦提示：文章信息量大且篇幅长，请各位自备瓜子，饮料，音乐）。

一.什么是清除浮动？
1.浮动的缺陷
在了解如何清除浮动之前，Kayo 先介绍为什么需要清除浮动。如本文开头所说的，浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。而一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明。

一个元素设置了浮动后，会影响它的兄弟元素，具体的影响方式较为复杂，这要视乎这些兄弟元素是块级元素还是内联元素，若是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行，导致被浮动元素覆盖，除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行；若是内联元素，则会尽可能围绕浮动元素。

More »

Tags ： 清除浮动, 清除浮动, 清除浮动, 父容器, 父容器, 父容器, clear, clear, clear, overflow, overflow, overflow, :after, :after, :after, 清除浮动, 清除浮动, 清除浮动, 父容器, 父容器, 父容器, clear, clear, clear, overflow, overflow, overflow, :after, :after, :after, 清除浮动, 清除浮动, 清除浮动, 父容器, 父容器, 父容器, clear, clear, clear, overflow, overflow, overflow, :after, :after, :after

因为要用到这样一个效果，http://yxp.163.com/cindex/iframeMail2/ 懒得写代码，随便搜了下，找到下面一段代码，修改下就能用。大家也可以把网址中的代码另存，研究这里面的代码，这是网易邮箱内的一个调用页，所以垃圾代码不会太多。有空我精简下放上来。

鼠标滑过图片显示半透明文字，边框变色代码

Tags ： 代码, 代码, 代码, 半透明, 半透明, 半透明, 定位, 定位, 定位, 鼠标移到, 鼠标移到, 鼠标移到, 代码, 代码, 代码, 半透明, 半透明, 半透明, 定位, 定位, 定位, 鼠标移到, 鼠标移到, 鼠标移到, 代码, 代码, 代码, 半透明, 半透明, 半透明, 定位, 定位, 定位, 鼠标移到, 鼠标移到, 鼠标移到

简单是max-width:就可完成图片最大宽度得限制，但是由于ie6不支持max-width只能通过expression来实现。
下面两段代码效果是一样的，我用的没问题，具体特色大家自行测试。第三段对高度同时做了限制。

代码如下：

img {max-width:400px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 400 ? "400px" : "auto"):"auto"); display:inline !important;}
.img{ 
max-width: 200px; 
height:auto; 
width:expression(this.width > 200 ? "200px" : this.width); 
}

第三段对高度同时做了限制。

.img{
max-width:201px; 
max-height:136px;
width:expression(this.width > 201 && this.width > this.height ? '201' : auto);
height: expression(this.height > 136 ? '136' : auto);
}

Tags ： 图片, 图片, 图片, 代码, 代码, 代码, css, css, css, 兼容, 兼容, 兼容, 控制大小, 控制大小, 控制大小, 图片, 图片, 图片, 代码, 代码, 代码, css, css, css, 兼容, 兼容, 兼容, 控制大小, 控制大小, 控制大小, 图片, 图片, 图片, 代码, 代码, 代码, css, css, css, 兼容, 兼容, 兼容, 控制大小, 控制大小, 控制大小

从网上找了一段返回顶部的代码，兼容性不怎么好，谷歌浏览器下不显示，IE6下不跟着屏幕动

修改了下发布上来，本人计算机上的搜狗、谷歌、FF、IE6/7/8、Opera、遨游……基本都测试过，不存在任何问题。演示效果见本站。

CSS代码：Body里面的不加也可以，只是IE6下面滚动的时候会抖。

More »

Tags ： 代码, 代码, 代码, 返回顶部, 返回顶部, 返回顶部, 代码, 代码, 代码, 返回顶部, 返回顶部, 返回顶部, 代码, 代码, 代码, 返回顶部, 返回顶部, 返回顶部

由于个人的一些需要，想通过CSS的方式来实现鼠标滑过图片出现半透明的效果，用JavaScript来实现是比较简单的，但是这里只分享如何用CSS来实现。
CSS中有个opacity属性，可以针对透明来设置，但是它只是对FireFox、Chrome等非IE内核下好用，在IE下并不是很好用。但是CSS下还有一个不常用的属性叫做滤镜filter，这个在IE下就好用。将opacity和filter属性结合一下，就可以实现鼠标滑过出现半透明效果了。

那么对应的CSS的写法如下：

.item1 a:hover img {

opacity:0.7;
filter:alpha(opacity=70);

Tags ： 图片, 图片, 图片, 代码, 代码, 代码, css, css, css, 半透明, 半透明, 半透明, 图片, 图片, 图片, 代码, 代码, 代码, css, css, css, 半透明, 半透明, 半透明, 图片, 图片, 图片, 代码, 代码, 代码, css, css, css, 半透明, 半透明, 半透明

很多时候，我们设置height为aoto是不起作用的，原因是div里的框架撑不起外部的div，今天在帮bo-blog修改皮肤的时候遇到了为mainWrapper加了边线，但FF下一直无法显示，原因就是mainWrapper无法被内部的内容撑起来，给其定义高度自然可以显示，但高度我应该定义多少呢，没办法定义。困扰了两天，刚整理了一段代码，大家根据自己的情况拿去用吧，里面有多余代码精简起来也不费神，我说了，根据自己的情况拿去用。

.clearfix:after{display:block; content:"."; visibility:hidden; font-size:0; height:0; clear:both; line-height:0;}
.clearfix{height:1%;zoom:1;}

More »

Tags ： 代码, 代码, 代码, css, css, css, 高度, 高度, 高度, min-height, min-height, min-height, 火狐, 火狐, 火狐, 代码, 代码, 代码, css, css, css, 高度, 高度, 高度, min-height, min-height, min-height, 火狐, 火狐, 火狐, 代码, 代码, 代码, css, css, css, 高度, 高度, 高度, min-height, min-height, min-height, 火狐, 火狐, 火狐

在网页设计CSS布局调整时遇到的现象：

当几个并列div元素使用float属性时，由于父容器没有定义实际高度(height)，在IE中显示出现问题，无法显示父容器的背景颜色或背景图片

More »

Tags ： css, css, css, div, div, div, 容器, 容器, 容器, 浮动, 浮动, 浮动, css, css, css, div, div, div, 容器, 容器, 容器, 浮动, 浮动, 浮动, css, css, css, div, div, div, 容器, 容器, 容器, 浮动, 浮动, 浮动