九宫格基本布局(二)

这里有两个地方需要注意到：

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，让它一直向下垂直平铺，然后因为总容器设置了overflow:hidden，会将多余的部分切除。

这样一个基本的九宫格布局就形成，你可以查看下面的演示模型。

本模型在以下浏览器中测试通过：

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

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

似乎到这儿就该结束了，然而….

要是细心的朋友在测试本模型时会发现，在IE6浏览器中，会与一个BUG不期而遇，那就是［IE6宽高值奇数1px BUG］，估且这么称呼吧，因为对于这个BUG，网络上并没有一个统一的称呼。

这个bug的激发条件是：
一个相对定位的父容器，其子容器采用绝对定位的方式向左或向右靠齐，当父容器的宽度值为奇数时，父容器与子容器之间会存在１px的间隙。不能完全紧贴在一起。

而我这个演示模型刚好满足了条件…

所以当你在IE6浏览器中缩小窗口，并进行拖拉缩放时，最右边和下面的两个小方块和父容器中会出现一个１px的空距。

如果你觉得不用考虑IE6的话，那么这种布局就已经基本满足你的需要了。

然而，对于一些比较追求完美的设计者来说，这是让人无法容忍的。