上次講到“欲練 CSS ，必先宮 IE”，如果你宮了IE然而還是覺得不得要領(lǐng)，那就該懷疑自己是不是有傳說中的table強(qiáng)迫癥了。

　　在CSDN社區(qū)上，時(shí)不時(shí)能夠看到一些頁面整體布局的問題，要求用div做一些table才能做到的，否則就以此為把柄說XHTML+CSS布局方法不好。其實(shí)，首先要做的是改變思維，以適應(yīng)XHTML+CSS的布局。

　　面向頁面設(shè)計(jì)而非面向?yàn)g覽器設(shè)計(jì)

　　XHTML+CSS能夠?qū)崿F(xiàn)的是一種流布局，也就是隨著內(nèi)容的長度自動(dòng)增長區(qū)域，并且最終導(dǎo)致整個(gè)頁面增長，這時(shí)候?yàn)g覽器就必須顯示滾動(dòng)條。table強(qiáng)迫癥的一個(gè)征兆就是極力避免流布局，希望以瀏覽器的可視區(qū)域?yàn)椴季帜繕?biāo)，要求在可視區(qū)域中劃分內(nèi)容區(qū)域而不是在頁面上劃分內(nèi)容區(qū)域。實(shí)際上XHTML是無法針對(duì)瀏覽器設(shè)計(jì)的，因?yàn)樗鼉H僅包含語義，或者說是內(nèi)容，而瀏覽器如何去表現(xiàn)這些內(nèi)容是我們無法確定的。CSS提供了我們控制表現(xiàn)方式的一種途徑，但這僅僅是針對(duì)主流瀏覽器的，而且瀏覽器支持的“指令集”還有稍為的差別（說到這，我真希望能夠?yàn)橐粋€(gè)瀏覽器寫CSS然后編譯為全平臺(tái)兼容代碼），最后這些指令暫時(shí)還僅僅支持針對(duì)頁面的流式布局控制。因此，如果你決定要開始寫符合語義的XHTML并且僅僅用CSS控制布局，首先就要把思路轉(zhuǎn)變?yōu)槊嫦蝽撁妫ɑ蛘哒f是文檔）的布局控制，而非面向?yàn)g覽器可視區(qū)域的布局控制。

　　接下來肯定有人要說，“那你就是承認(rèn)了有些布局老方法很容易做到，但新方法很難做到啦”。這是當(dāng)然的，然而這不成為我們繼續(xù)使用table的理由。這時(shí)候要反過來探討原始目標(biāo)了，我們是為什么要控制布局？低層次的需求是為了美觀，誰都希望同樣的內(nèi)容能夠以更好的視覺效果展示在用戶眼前；高層次的需求是為了控制受眾的瀏覽方式，讓他們能夠按我們預(yù)先設(shè)計(jì)好的方式來區(qū)分頁面內(nèi)容的輕重點(diǎn)，按我們的期望優(yōu)先瀏覽某些內(nèi)容，同時(shí)也幫助他們更快的找到他們想要的內(nèi)容，而不會(huì)在我們的網(wǎng)站內(nèi)感到沮喪。既然我們確定了這時(shí)控制布局的目標(biāo)，那么我們再來看看CSS是不是“沒辦法把事情做好”。首先，CSS也能做出美觀的頁面，雖然某些布局做不到，但是在CSS的限制下做到同等美觀程度的頁面是肯定沒問題的。其次，CSS也能讓設(shè)計(jì)變得友善，不會(huì)說CSS的設(shè)計(jì)就肯定是“干凈”到用戶無法一眼找到他想要的功能。因此，雖然CSS無法實(shí)現(xiàn)某些特定的布局效果，但對(duì)于設(shè)計(jì)師來說它能夠達(dá)到老方法所能達(dá)到的同等效果，這就足夠了。

　　從XHTML中去掉內(nèi)容無關(guān)的視覺元素

　　另一個(gè)table強(qiáng)迫癥的征兆就是，習(xí)慣為每一個(gè)視覺上的元素對(duì)應(yīng)一個(gè)XHTML元素。在table中，無論視覺效果有多復(fù)雜，我們總能不停的切割table，甚至table套table，直到準(zhǔn)確定位每一個(gè)特定的元素。然而應(yīng)用了CSS之后，這就是不必要的，甚至?xí)o設(shè)計(jì)師帶來麻煩，因?yàn)閄HTML+CSS就是為了內(nèi)容和布局分離，所以如果一個(gè)視覺元素與內(nèi)容無關(guān)，那么它就不應(yīng)當(dāng)出現(xiàn)在XHTML中，自然也就不會(huì)對(duì)應(yīng)一個(gè)XHTML元素。

　　例如有一個(gè)網(wǎng)站當(dāng)前欄目的徽標(biāo)，這個(gè)徽標(biāo)沒有任何的語義，而XHTML中也有文字內(nèi)容描述當(dāng)前欄目了，那么這個(gè)徽標(biāo)就并不一定要對(duì)應(yīng)一個(gè)元素。如何讓徽標(biāo)顯示出來呢？它可以是當(dāng)前欄目文字描述區(qū)域的background-image，同時(shí)通過一些定位技巧讓它顯示出來。如果你認(rèn)為有這個(gè)徽標(biāo)就不需要文字描述時(shí)，你還可以通過定位技巧將文字隱藏掉，這樣單純看XHTML或者在不支持CSS的瀏覽器上就只見文字描述，而在支持CSS的瀏覽器中則看見會(huì)標(biāo)。從這個(gè)例子，我們可以看得到一個(gè)視覺元素不一定要對(duì)應(yīng)XHTML中一個(gè)實(shí)實(shí)在在的內(nèi)容元素，或者對(duì)應(yīng)一個(gè)文本元素而非圖形元素。XHTML包含的是內(nèi)容，那就不應(yīng)該包含與內(nèi)容無關(guān)的視覺元素描述，而通過CSS你可以事后增加有關(guān)的視覺元素。

　　又例如:before和:after這兩個(gè)偽選擇器，允許你創(chuàng)建插入在匹配元素前后的元素，這樣就能夠?qū)崿F(xiàn)非內(nèi)容視覺效果僅在CSS中插入。常見的用法包括，插入clear到浮動(dòng)元素之后以確保父元素的完整包含，又或者是引用語句的前后自動(dòng)加上引號(hào)。事實(shí)表明，CSS是很適合于將非內(nèi)容的元素從XHTML中分離出來的，因此我們在設(shè)計(jì)XHTML時(shí)就不能夠總想著要有什么效果，而應(yīng)該單純想著信息的組織形式。

　　最后，如果要我為table強(qiáng)迫癥開處方的話，我還是會(huì)選擇《CSS Mastery/精通CSS》。看完之后，你自然能夠解除上述的煩惱，理解到CSS布局帶來的便利，從而選擇開始用純CSS的思維來進(jìn)行設(shè)計(jì)。

it知識(shí)庫：你有 <table /> 強(qiáng)迫癥嗎？，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。