|
注意：
這里有兩個地方需要注意到：
1、就是t_m和b_m這兩個容器是需要水平平鋪的，所以需要將它的z-index設置為比左右兩角的div的z-index的值低，我們將它設置為z-index:1;這樣它就置于t_l和t_r的下面了，然后，我們設置它的寬度為100%，讓它水平鋪滿整個第一行的寬度。
.t_m{ z-index:1;width:100%; }
2、對于m_l，m_r這兩個div容器，因為要讓背景向下垂直平鋪，所以我們將它們的高度值設為一個非常大的值，我們將它設置為20000px，讓它一直向下垂直平鋪，然后因為總?cè)萜髟O置了overflow:hidden，會將多余的部分切除。
這樣一個基本的九宮格布局就形成，你可以查看下面的演示模型。
本模型在以下瀏覽器中測試通過：
IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
似乎到這兒就該結(jié)束了，然而….
要是細心的朋友在測試本模型時會發(fā)現(xiàn)，在IE6瀏覽器中，會與一個BUG不期而遇，那就是［IE6寬高值奇數(shù)1px BUG］，估且這么稱呼吧，因為對于這個BUG，網(wǎng)絡上并沒有一個統(tǒng)一的稱呼。
這個bug的激發(fā)條件是：
一個相對定位的父容器，其子容器采用絕對定位的方式向左或向右靠齊，當父容器的寬度值為奇數(shù)時，父容器與子容器之間會存在１px的間隙。不能完全緊貼在一起。
而我這個演示模型剛好滿足了條件…
所以當你在IE6瀏覽器中縮小窗口，并進行拖拉縮放時，最右邊和下面的兩個小方塊和父容器中會出現(xiàn)一個１px的空距。
如果你覺得不用考慮IE6的話，那么這種布局就已經(jīng)基本滿足你的需要了。
然而，對于一些比較追求完美的設計者來說，這是讓人無法容忍的。
……
后文待續(xù)......
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2934372-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/6800.asp 
出處：藍色理想
責任編輯：bluehearts
上一頁 九宮格基本布局 [1] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 九宮格基本布局 [2]
