我的栅格系统实现September 20, 2008

如果没有了解栅格系统是什么，建议看完这篇文章以后再回来。

其实有很种 CSS 写法实现栅格系统，很多 CSS 库也都会提供类似的栅格系统实现（譬如：YUI，BluePrint）。

引用 One True Layout 文中所言，良好的布局应该具有的几个特性：

请允许我“重复造了轮子”，我的栅格系统实现是基于“伪绝对定位布局”，这样可以更好的实现上述所言的几个特征（很难解释，还是直接看 DEMO ）。

如何使用上面定义的 CSS 栅格？很简单，只需要定义一行内列的数量以后，再定义列占据的相应栅格宽度以及开始位置即可。譬如定义某列占据 17 个栅格、并从第 3 个栅格开始排版，那么使用下面的 class

column-17 start-03

类似的，如果是通栏，那么就是占据 24 个栅格，并从第一个栅格开始（以 Taobao UED 定义的 950px 宽度为公式 W ）

column-24 start-01

因为是上述“伪绝对定位”的布局，所以相应列之间不会相互影响。而理解上述布局可能需要些时间，同时感谢师兄那么详细的讲解，我相信也会给你带来收获。

很难具体的解释其中的细节，但是希望有问题的朋友能够留言，我尽量帮你解答。

针对 Safari（WebKit）的 CSS 注意事项September 9, 2008

Google Chrome 的发布，使我们更加的注重基于 WebKit 核心的浏览器的表现情况，但我们很多时候“不小心”就会出现问题。考虑下面极端的情况

.box {
    background: red;
    #
    background: yellow;
    background: #green;
}

经过测试发现，Exploer 系列浏览器会显示黄色（yellow），Firefox 与 Opera 则会显示红色（red），而 Safari 以及 Chrome 则会显示绿色（green）。

按照本人的理解，这是各浏览器 CSS 解释上的差异造成的。首先，Safari 会对于 #red 这样的“常量颜色值”会尝试解析，而其他浏览器则取“#”后面的 16 进制色值。

然后对于

.box {
    #
    background: yellow;
}

的理解，Exploer 系列会直接解析成 background: yellow; 而其他浏览器则等待“;”然后连接起来，所以不起作用。类似的可以使用

.box {
    .
    background: yellow;
}

测试下。但如果语句后面加上分号“;”

.box {
    #; /* 或者 .; */
    background: yellow;
}

则会恢复正常。可以参考这里，获得更进步的详细信息。

总结下的结论，首先，比如你想针对 Exploer 仅 Hack 一条语句，那么可以在其上行简单加个“.”或者“#”，这仅适合临时调试使用。

其次，期前如果不小心写成 #red 这样的色值，可能会无关要紧。但就目前众多的浏览器情况而言，可能就会有上述意想不到的结果，所以 CSS 方面的细节我们要更慎重的对待。

今天有用户报告，说打开我们的页面会导致浏览器崩溃。查了下，原来是这句 CSS 导致了性能的问题

_height: expression(this.scrollHeight > 200 ? 200 + 'px' : 'auto');

看来还是 Exploer 的 CSS expression 作祟。简单的说明下这个语句，主要是实现 Exploer6 不支持的 max-height 属性而做的个 Hack（是个“历史遗留问题”）。

期前对于 CSS expression 也做过类似的测试，使用程度为--慎用--禁用（原因有三，仅 Exploer 支持、性能消耗很大、脚本和表现混杂）。

这一 Hack 姑且可以被认定为，是在 Exploer6 走向末路之前的“救命稻草”（但目前在日常的项目中，如果出现这样的代码，是无论如何都不会被允许的）。

最后，简单的写了个 DEMO，以及更多的信息可以查看这里。

注： Exploer7 已经支持 max-height 等属性。