DIV + CSS 之上中下，左右布局及IE6的3象素间隙问题

最近要求新的页面全部采用DIV + CSS来编写，前台页面制作的同事还不是很熟悉，我就在网上查了一下，写了个示例，以便参考。

很多页面的结构一般是上中下结构，然后中间部分要不是左右布局，要不是左中右布局。下面是简单的代码（test.htm）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV + CSS 之上中下,左右布局</title>
<link rel="stylesheet" rev="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<div id="headdiv">这是头部内容</div>
<div id="centerdiv">
<div id="left">左栏固定宽度为200px</div>
<div id="right">右栏固定宽度为200px</div>
<div id="center">中间自适应宽度</div>
</div>
<div id="footdiv">这是底部内容</div>
</body>
</html>

再建下面的样式文件（css.css）：

body {
margin: 0 0 0 0;font-size: 12px;TEXT-ALIGN: center;
}
#headdiv {
background-color: #CCCCCC;
height:50px;
width:80%;
MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}
#centerdiv{
width:80%;
MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}
#left {
float: left;
width: 200px;
height:60px;
background-color: #CC99FF;
border-width: 0;
}
#center {
margin: 0 200px;
height:60px;
background-color: #FF9999;
}
#right {
float: right;
width: 200px;
height:60px;
background-color: #996600;
}
#footdiv {
clear: both;
background-color: #CCCCCC;
height:50px;
width:80%;
MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

用 IE 6 打开 test.htm 效果图如下：

用 IE 7 或者 firefox 或者谷歌浏览器打开，效果图如下：

OK，排版都没问题了，这里关键几个地方：
一是，footdiv 里要加上 clear: both;，不然只有IE能正常显示低部；
二是在 test.htm里， <div id="right">右栏固定宽度为200px</div> 要写在 <div id="center">中间自适应宽度</div> 之前，不然排版会乱的。
三是注意 left块是浮在左边，即：float: left; 而 right块是浮在右边，即：float:right; 然后 center 快，是距左边 200px处。

但如果再详细看一下显示效果图，会发现在 IE 6 中的中间部分有空隙，这就是网上说的 IE 3px bug，要想在IE 6 中不让显示空隙，就要调查一下样式：
一：把center 的 margin: 0 200px; 改为 margin: 0 197px; 也就是再向左边3个px，或者直接去掉这。
二：在 left 中加入： margin-right:-3px;
三：在 right 中加上 margin: 0 0 0 -3px;
这样改后，在 IE 6中打开后，就没有空隙了，但这样改后，左边和右边快的宽度就不是实际的200px了，当然这可以调整。

DIV + CSS 之上中下，左右布局及IE6的3象素间隙问题

有话要说