岁月如歌

直接借用PPK的演示代码：

div.container { border: 1px solid #000000 }
div.left { width: 45%; float: left }
div.right { width: 45%; float: right }

浮动门Bug就这样粉墨登场了：

做了一个demo页面，各种解法办法都在里面，自己看^o^

个人推荐使用办法二：

#container { overflow: hidden; _zoom: 1 }

采用hidden是因为：如果没设定高宽，hidden和auto的效果一样的；如果设定了高宽，hidden则是大部分情况下的预期结果。_zoom: 1是为了兼容讨厌的ie6.

2008-11-06更新：经圆心指点，overflow: hidden用来布局容易出问题，一是用 JavaScript Popup 出来的层很可能显示不全（致命伤）；二是在某些情况下会造成双击空白处全选（没总结出规律，偶尔会出现）。此外，某些时候还会造成性能问题。

另外，用overflow清除浮动其实是一个hack, overflow本意不是用来干这个的，如果哪一天浏览器渲染引擎升级了，解决了这个“bug”，这个方法很可能就会失效。因此最好的清除浮动的办法还是PIE的方法：

.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}

针对中文网站，上面有些改进：content:"020";是放一个空白字符（小虎指出“.”在中文编码的页面有时会出问题，采用空白字符借鉴自Adobe首页）。这样，visibility:hidden;也就没必要了。

百度的小志还指出，最好将font-size: 0; line-height: 0;也加上。我和小虎讨论的结果是，这两个其实是针对ie的hack, 但实际上ie不认识:after. ie下，用zoom: 1;就已经搞定了，不需要加入其它hack.

另外，IE/Mac是老古董了，不必再考虑。

百度有啊开了，作为淘宝的一名深情前端开发工程师，打开百度有啊的第一件事是F12:

很典型的24列960栅格系统的两栏布局，很明显的YUI风格。注意主体的两栏布局又分成了两部分，两部分的结构是一样的。 阅读全文 »

研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）

淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：

（图1）

纷乱的高度世界

我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向：

（图2）
高度方向的布局是：90 : 117 : 100, 第一个间隔是8 阅读全文 »

在25日的扯淡里，碰巧发现了autocomplete的作用。今天看见realazy兄遇到按扭状态未还原问题，通过js来重置。其实用autocomplete就可以轻松解决：

<input name="submitBtn" autocomplete="off" type="submit" value="提交" />

这样，后退或刷新页面时，Firefox就不会自动记忆表单状态了。

演示页面：firefox_autocomplete_test.php

详细资料：How to Turn Off Form Autocompletion

Twitter Tool是世界上最流行的微博客Twitter在世界上最流行的博客WordPress上的一款插件：

This plugin creates an integration between your WordPress blog and your Twitter account. Pull your tweets into your blog and create new tweets on blog posts and from within WordPress.

目前稳定版本1.2b1对时区的处理上存在问题，比如对中国用户来说，存在8小时偏差。花了点时间从网上搜索到了解决方案，同时参考LoudTwitter的输出，给daily digest的每条tweet加上了时间戳，效果可以参考这里。具体样式取决于WordPress皮肤，自己在style.css里调整下吧。