<dexbol />

.fix{
    content:'.';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

上面的代码是最常见的清除浮动的方法（在支持:after伪选择符的浏览器下），国内各大网站也都普遍使用此方法，但这里有一个缺陷：demo

通过demo可以看到最外层div#page底部与body有一个空隙，但这里的确什么内容也没有。把清除浮动类的visiblity属性删除后发现原来是content属性指定的点号。造成这个现象的原因是：上面的css规则并没有很好的隐藏掉content内容。

上面有两条rule是用来隐藏content属性指定的内容(这里是点号)：height:0 这样设置并不能隐藏元素，但超出的文本会自然溺出，不会影响到下面的文档流（类似position:absolute），然后用visibility:hidden把它隐藏掉，在大多数情况下这样就ok了。但是当溺出的文本下面没有文档流的时候，他就会像普通文本那样也占个位

解决办法很简单，既然是溺出的文本那加个font-size:0就搞定了，或者更严谨一些，如下面的yahoo.com里的清除浮动的css rule

ol:after, ul:after,
.md:after, .md-sub:after, .hd:after, .bd:after, .ft:after,
.fixfloat:after, .fbody:after,
#colcx:after, #rightcx:after, #eyebrow:after,
#masthead:after, #search:after, #tabs:after,
#doors:after, #patabs:after, #patop:after,
#trough-overlay-bd div:after, #newsft:after, #newsbottom:after{
    content:".";
    display:block;
    font-size:0px;
    line-height:0px;
    height:0;
    clear:both;
    visibility:hidden;
}

这是我发现的唯一一个在清除浮动的样式表里使用font-size:0的网站 ，yahoo 美国真不是盖的。

受TBCompressor的启发写了这个Rooms6Crush用于对png和jpg图片进行压缩。
这样windows下不需要命令行就能很方便的压缩图片了。

Rooms6Crush是在常见的几个图片压缩工具上做了简单的批处理封装。针对png文件会先使用pngout进行压缩然后使用pngcrush进行二次压缩（大多数情况下二次压缩并没有效果），针对jpeg文件会使用jpegtran进行压缩。

下载后解压，双击install.cmd安装，安装后右击jpg或png图片菜单里会出现6roomsCrush，单击后压缩。双击uninstall.cmd卸载。

下载地址: http://www.box.net/shared/g0nmjdj2j2

Update:

修改了一个bug 新版本下载: http://www.box.net/shared/8×8chxxuzb

如果上面链接无法打开可以试试这个：http://www.boxcn.net/shared/8×8chxxuzb

今天才突然想到这个问题，它的意义在于: 不管事件在哪个元素上发生，发生在哪个阶段，都可以取消浏览器默认事件动作。

http://dexbol.com/demo/javascript/note/browser_default_action.html

最近看了Images Optimization 系列文章,作者是Stoyan Stefanov，就职于Yahoo Exceptional Performance小组，Yslow的主要开发人员。这里记录一下阅读后的心得。

1. alexa前十名的网站，图片占所有组件的比重是46.6%,所以对图片做优化是相当必要的。

2. “Give PiNG a chance !”.这个是老生长谈了。不过这里的png是指索引png(8位png图片，以后统称png8),而不是真彩png（24或32位png，以后统称png32）。因为png32并没有什么优势，保存成jpg通常比png32要小。对图片格式的使用总结如下：

   • 照片存为jpg格式。
   • 动画保存为gif格式。
   • 其他都用png8搞定。

   读这篇文章时我最大的收获是知道了：png8也支持半透明（variable/alpha transparency）。这让我兴奋的半天。而且不同于png32的是，不支持png半透明的浏览器(如ie6)会自动降级到全透明(像gif那样)，而不是像png32那样会有一个难看的背景。(demo)

3. 压缩图片

   压缩PNG，主要工具pngcrush

   >pngcrush -rem alla -brute -reduce src.png dest.png
   

   -rem alla : 除了关于透明的信息外，其他全都干掉。
   -brute : 很暴力的使用各种方法压缩，以使图片被压缩到最小。
   -reduce : 尽可能的删掉调色板中多余的颜色。

   一次处理多个文件可以张样：

   >pngcrush -rem alla -reduce -brute -d folder src1.png scr2.png
   

   对于alexa前十的网站，用这招平均可以干掉16.05%的大小。

   其他压缩工具还有：pngout , optipng 等 。强烈推荐一下pngout，它总能给我带来惊喜，比如一个用pngcrush压缩过的图片(32k),用pngout压缩后还可以再干掉5k！关于这些工具的性能介绍可以阅读 Stoyan Stefanov的另一篇文章PNG optimization tools

   去掉jpeg的metadata信息(包括EXIF，application datameta以及评论)，主要工具jpegtran

   >jpegtran -copy none -optimize src,jpg dest.jpg
   

   上面的命令复制并优化src.jpe,复制过程中去掉了所有metadata信息。同样用这招前十大网站可以干掉11.85%

   使用png8替换非动画gif，工具:imageMagic

   >convert image.gif PNG:8:image.png
   

   然后再对png进行压缩，用这招前十大网站可以干掉20.42%

   优化动画gif，使用工具GIFsicle

   > gifsicle -O2 src.gif > dest.gif
   

   上面命令的作用是删掉相同的帧，详见这里。

   觉得上面的太麻烦？使用smush.it吧。这同样是Stoyan Stefanov的杰作。

4. jpeg 渐进式还是普通式？渐进式的优点是对用户尤其是窄带用户更友好,不过关键还是看哪种更小。Stoyan做了一个测试，最后的结论是：小于10k的普通式比较小，大于10k的渐进式比较小。测试的具体数据和过程在这里

5. 避免使用ie的AlphaImageLoader滤镜，因为AlphaImageLoader滤镜是梯形渲染所以会使整个页面渲染速度变慢，而且比较费资源。具体数据点击这里。代替方案是使用VML，DD_belatedPNG就是一个利用vml解决ie不支持半透明png的js对象。用它不仅可以让ie6支持半透明png，还可以支持background-repeat 和:hover .代价是要多下载一个5.5k的js文件。个人感觉并没有太大必要。

以上链到YUI的链接都需要穿墙。

父元素haslayout=-1,若干子元素浮动,当最后一行子元素的总宽度及单个子元素的(width + border + margin + padding)乘以最后一行的元素个数小于父元素宽度
(设置或继承)加2px时,最后一行子元素margin-bottom被忽略。

用一个简单的表达式表示：

var SEOW=单个子元素的整体宽度(margin+padding+border+width);
var PEW=父元素的宽度(width, 设置或继承);
var N=最后一行子元素的个数;
if(SEOW*N<PEW+2){
  //最后一行子元素margin-bottom被忽略。
}

Demo:

http://dexbol.com/demo/css/ignore-margin-ie6-bug.html(*Open It In IE 6*)

最近学习mootools,看了一遍文档，小试牛刀一下。

还记得儿时的拼图游戏吗？

http://dexbol.com/demo/javascript/jigsaw_puzzle.html