實例：CSS hacks實現跨瀏覽器多列布局

　　網(LieHuo.Net)網頁制作 利用純CSS創建一個等高多列的布局并不件易事，本教程將著重分析出現在多列布局的多個問題，然后為大家等來一個簡單全瀏覽器通吃的解決方法，不使用圖片，腳本，CSS hacks并在最嚴格的XHTML 規范中都能通過驗證。

　　問題的癥結所在

　　< STYLE type=text/css> .title {color:#ff7200;font-size:23px;line-height:28px} < /STYLE>  

　　如上圖所示，由于各列的內容不一致導致其背景的高度也不統一。而背景實質上是內容（標準的盒子模型是由內容區，補白區，邊框區與邊界區組成，背景存在于前三者中；IE為前兩者）的自適應的問題。再轉化一下，如何撐大那些較短的列的高度，讓所有列的高度等于最高的列的高度？這個，的確很很棘手，因為我們不清楚各列的高度，也無從得知哪一列最高。我們也不能簡單地給所有列一個明確的高度，這可能會導致所有列都多出一大片空白，或者很不虧由于高度不足導致某些列的內容無法全部顯示出來！現實中，內容的長度是動態的，因此每列的高度也是動態的。我們必須意識到在網絡中，不存在”固定“二字，每個人的顯示器的分辯率都不盡一樣，游覽器的字體大小設置也不盡相同，這些都會影響到內容的顯示高度。

　　對內容與背景實行分離

　　解決等高問題的第一步就是把它拆分為兩個較小的，可以單獨解決的部分。這樣，我們原來是一列對應一個DIV，現在是一列對應一個DIV，一個用來裝載內容，一個用來顯示背景。這種分離有利于我們對各個元素的掌控和把它們用另一種更有效的方式組合起來，這引起我很快會在下面的章節講述。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈