CSS display:table屬性
當IE8發佈時，它將支持很多新的CSS display屬性值，包括與表格相關的屬性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是最後一款支持這些屬性值的主流瀏覽器。它標誌着複雜CSS佈局技術的結束，同時也給了HTML表格佈局致命一擊。最終，使用CSS佈局來製作出類似於table佈局的柵格將會變得十分迅速和簡單。
網頁元素應用上那些與表格相關的display屬性值後，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS佈局帶來的巨大影響。
使用CSS表格
CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如，“CSS display:table;”的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。使用基於表格的CSS佈局，使我們能夠輕鬆定義一個單元格的邊界、背景等樣式，而不會產生因爲使用了table那樣的製表標籤所導致的語義化問題。
在深入瞭解這種方法之前，讓我們先來寫份HTML文檔實例：
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <htmlxmlnshtmlxmlns=http://www.w3.org/1999/xhtml
- lang="en-US">
- <head>
- ?HTMLheadcontent…
- </head>
- <body>
- <dividdivid="wrapper">
- <dividdivid="header"></div>
- <dividdivid="main">
- <dividdivid="nav">
- ?navigationcolumncontent…
- </div>
- <dividdivid="extras">
- ?newsheadlinescolumncontent…
- </div>
- <dividdivid="content">
- ?mainarticlecontent…
- </div>
- </div>
- </div>
- </body>
- </html>
這份HTML源代碼滿足了內容呈現方面的要求。先是導航欄，然後是附加欄，最後是內容欄。我們同樣需要將以下CSS樣式應用上去：
- #main{
- display:table;
- border-collapse:collapse;
- }
- #nav{
- display:table-cell;
- width:180px;
- background-color:#e7dbcd;
- }
- #extras{
- display:table-cell;
- width:180px;
- padding-left:10px;
- border-right:1pxdotted#d7ad7b;
- }
- #content{
- display:table-cell;
- width:380px;
- padding-left:10px;
- }
這種基於表格的新CSS佈局方式能夠正確的在IE8、Firefox、Safari和Opera（北京電腦維修注：包括FF2/FF3/Google都通過了測試）中顯示出來。下面這張圖片是它在IE8中的樣子：
我們輕鬆實現了三欄等高佈局，而無需使用僞造背景圖片之類的技巧，更不用擔心定位和清除浮動的問題！