牢不可破的九宮格佈局

在我的前一篇教學《九宮格基本版面》中，我介紹了用相對定位加絕對定位的方法來製作九宮格的基本版面。這是一種比較符合人們慣性思維的方法，好像製作過程中一切都是順理成章的事情，然而因為IE6讓人噁心的奇偶性BUG，使得這種佈局方法要想通用變得有點遙不可及，因為國內大多數用戶還是用IE6，我們不能因此而失去這部分用戶。

這個BUG目前是無藥可治，也沒有什麼Hack技巧能運用，唯一能用的方式就是繞過它。也就是說我要定位這九宮格的四個角容器的位置，絕對定位的方法是不能採用的了，這不吝是一個重大的打擊，這將完全推翻我前一篇文章中用到的方法，我們只好另起爐灶了。

那麼還有那些技術能夠拯救這個BUG於水深火熱之中呢？我們知道如果用左右浮動的方法能夠準確地將元素物件發生偏移，而這種方法也能避免IE6的奇偶性BUG。 OK，我們就用它了。

佈局的重點和困難

我們還是按照表格的結構來建構我們新模型的結構體，然而這次會相對於前一篇文章的結構有所改變。在這個模型中我們要關注的重點和困難是以下這兩點：

1、 t_m和b_m這兩個中間容器的寬度值必須是一個百分比的值，否則不能保證整個九宮格的左右動態伸展，它絕不能為某個固定的像素值。其寬度等於總容器寬度減去兩側角容器寬度總和的百分比值。其計算公式為：

t_m（或b_m）的寬度=（總容器寬度-（左上角容器寬+右上角容器寬度））/總容器寬度

也就是說t_m或b_m的寬度不是100%，然而t_l和t_r這兩個容器的寬度在實際案例中一般是一張圖片的寬度，所以它一般都是一個固定寬度值，這樣在一個同行的三個容器中，左右兩側寬度是固定值，而中間又要求是百分比，而這三個容器的總寬度加起來應該是100%，這該怎麼辦呢？

這裡我們採用比較穩健的辦法讓中間容器能達到理想的寬度百分比：

我們可以用一個DIV容器，設定它的padding:0 10px;不設定它的寬度，預設狀況下，它的寬度就是100%的。因為設定了左右的padding值，則其內部的寬度就是我們要的t_m的理想寬度值，因此我們再給它內部定義一個容器，這個子容器寬度設定為100%。這個子容器的背景色就可以設定為左右水平平舖的背景圖。這個子容器就是我們要用到的上頂邊容器。它滿足了我們對寬度值的特殊要求。

因此這個t_m的結構就可以做成如下的結構：

然而這樣定義會導致另一個問題，這個問題在IE7以下的瀏覽器的都存在，因為我們定義了padding，會在下面的中間的主體層中也同時產生左右側的內補丁，這裡有點不明白的是：為什麼會對IE7產生影響？

因此其補救方法是在這裡針對IE6和IE7應用一個HACK技巧：

.b_l{margin-left:0px;+margin-left:-10px;_margin-left:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}

這句話是針對三種瀏覽器設定不同的偏移值，將b_l和b_r向左右偏移到指定的位置。

2、 b_l和b_r這兩個容器的高度值必須相同，以使它們可以一直垂直向下平鋪背景色。這樣，當中間主體內容區（context）中內容的高度改變時，其兩側的背景色能一直和主體內容區（context）保持相同高度。也就是說它們能根據內容主體的高度而自由地拉伸自己的高度值。

我們可以採用在平時工作中常用到的多列同高的方法來處理這個問題。這個方法就是採用內補丁和負外補丁相結合的方式來達到多列同高：

.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}

我們將m_l和m_r的下內補丁padding-bottom的值設定為一個相對比較大的值，例如我將它們設定為30000px（你可以將它設定為你想要的值），相信一般的情況下，是不會超過這個高度值了。然後將下外補丁（margin-bottom）設定為和下內補丁（padding-bottom）值相同的負值，將它拉回原來的位置上，並將總容器（box）設定overflow:hidden;，截除多餘的高度，就可以保證兩列同高。

將上面兩個難點問題解決後，剩下的事情就是簡單而愉快的事情了！ [Cut-Page]

結構層

現在我們將結構層在前一個案例的基礎上作了一下調整，因此就成了下面這樣一種結構了：

樣式層

下面是主要的樣式設定：

你可以用八張圖片來製作一個漂亮的九宮格盒子。看看它的完美表現。

本模型在以下瀏覽器中測試通過：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

本文連結： http://www.blueidea.com/tech/web/2009/6805.asp