YUI 中的 Grids CSS 主要有三個(gè)部分值得大家關(guān)注和學(xué)習(xí):
1、布局的思想:使用 “負(fù) margin(Negative Margins)” 技術(shù)
詳細(xì)可參閱:《Creating Liquid Layouts with Negative Margins》
2、使用 em :當(dāng)用戶改變字體大小時(shí),寬度同時(shí)改變。
技巧:用 13 像素來(lái)平分寬度(保留小數(shù)到千分位),而 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 得到。同解于為什么現(xiàn)在的 YUI 源碼中 IE 下 750px 的寬度是:56.301em(750 / 13 * 0.9759)。
此算法將在 YUI 的下個(gè)版本中換為上面的新算法(IE 瀏覽器用 13.333 )。
3、清除布局的浮動(dòng)
針對(duì)非 IE 瀏覽器:
.yui-gf:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
而對(duì)于 IE 瀏覽器,使用了 zoom:1 來(lái)觸發(fā) haslayout。不過(guò)對(duì)于此 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.
個(gè)人比較贊成他的想法:I think it is an acceptable tradeoff。
本文鏈接:http://m.95time.cn/tech/web/2008/5748.asp
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|