實例：CSS hacks實現(xiàn)跨瀏覽器多列布局

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

　　問題的癥結所在

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

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

　　對內(nèi)容與背景實行分離

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

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