這里有兩個地方需要注意到：

1、就是t_m和b_m這兩個容器是需要水平平鋪的，所以需要將它的z-index設(shè)置為比左右兩角的div的z-index的值低，我們將它設(shè)置為z-index:1;這樣它就置于t_l和t_r的下面了，然后，我們設(shè)置它的寬度為100%，讓它水平鋪滿整個第一行的寬度。

.t_m{ z-index:1;width:100%; }

2、對于m_l，m_r這兩個div容器，因為要讓背景向下垂直平鋪，所以我們將它們的高度值設(shè)為一個非常大的值，我們將它設(shè)置為20000px，讓它一直向下垂直平鋪，然后因為總?cè)萜髟O(shè)置了overflow:hidden，會將多余的部分切除。

這樣一個基本的九宮格布局就形成，你可以查看下面的演示模型。

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

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

運行代碼框

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

似乎到這兒就該結(jié)束了，然而….

要是細(xì)心的朋友在測試本模型時會發(fā)現(xiàn)，在IE6瀏覽器中，會與一個BUG不期而遇，那就是［IE6寬高值奇數(shù)1px BUG］，估且這么稱呼吧，因為對于這個BUG，網(wǎng)絡(luò)上并沒有一個統(tǒng)一的稱呼。

這個bug的激發(fā)條件是：
一個相對定位的父容器，其子容器采用絕對定位的方式向左或向右靠齊，當(dāng)父容器的寬度值為奇數(shù)時，父容器與子容器之間會存在１px的間隙。不能完全緊貼在一起。

而我這個演示模型剛好滿足了條件…

所以當(dāng)你在IE6瀏覽器中縮小窗口，并進行拖拉縮放時，最右邊和下面的兩個小方塊和父容器中會出現(xiàn)一個１px的空距。

如果你覺得不用考慮IE6的話，那么這種布局就已經(jīng)基本滿足你的需要了。

然而，對于一些比較追求完美的設(shè)計者來說，這是讓人無法容忍的。