YUI Grids CSS 解读

YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：

Yahoo!网站性能最佳体验的34条黄金守则—内容

1、布局的思想：使用 “负 margin（Negative Margins）” 技术

详细可参阅：《Creating Liquid Layouts with Negative Margins》

2、使用 em ：当用户改变字体大小时，宽度同时改变。

技巧：用 13 像素来平分宽度（保留小数到千分位），而 IE 浏览器用 13.333 。

/* 750 centered, and backward compatibility */
#doc {
 width:57.69em;
 *width:56.251em;
 min-width:750px;
}

• 57.69 = 750 / 13

• 56.251 = 750 / 13.333

注：《Setting Page Width with YUI Grids》 一文中提到：IE 下的 em 是宽度除以 13 ，再乘以 .9759 得到。同解于为什么现在的 YUI 源码中 IE 下 750px 的宽度是：56.301em（750 / 13 * 0.9759）。

此算法将在 YUI 的下个版本中换为上面的新算法（IE 浏览器用 13.333 ）。

3、清除布局的浮动

针对非 IE 浏览器：

.yui-gf:after {
 content:".";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
}

而对于 IE 浏览器，使用了 zoom:1 来触发 haslayout。不过对于此 Nate Koechley 这样解释的：

Zoom is a non-valid attribute and so you’ll see warnings when you validate your CSS. I’m aware of that and think it is an acceptable tradeoff.

个人比较赞成他的想法：I think it is an acceptable tradeoff。