YUI Grids CSS 解讀

YUI 中的 Grids CSS 主要有三個部分值得大家關注和學習：

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。