相信做过div布局的朋友，都曾经做过这样的网页布局
要对这样的图片进行布局，一般都会先把这张图片进行切片，把上下两个圆角条切下来，中间再取一条背景条，得到三张图片。
头部那张图片高10px,底部那张图片也是高10px,然后我们就开始写css进行布局了。
<style type="text/css">
.top{
width:373px;
height:10px;
background:url(images/2_01.gif) no-repeat;
}
.middle{
width:373px;
height:300px;
background:url(images/2_03.gif) repeat-y;
}
.bottom{
width:373px;
height:10px;
background:url(images/2_05.gif) no-repeat;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</body>
然后浏览一下，会发现，为什么在IE7和firefox里面浏览正常，但是在IE6里面会出现以下这种情况呢？
我们看到上面那张图片底下有一片空白。为什么呢，明明这张图片就是10px，我们在css里面定义的数值也没错啊？
刚开始的时候我也是一样迷惘，后来在IE6用IE developer Toolbar看的时候，发现top这个div那个高度虽然表面数值好像是12px，但是实际数值好像是18px（括号后面的数值），后来我再在网上找资料，发现了原来在IE6下div有个默认高度，当定义的div高度小于18时候，它会自动给你加到18px，所以就会发现上面图片那种有空白的情况（图片没有这么长，当然下面有空白）。其实下面那个div也是有问题的，只不过下面空白看不到而已。
那现在怎么解决呢？我们可以在css里面加上overflow:hidden这个属性，这样把多出来的部分隐藏掉就可以了。大家试一试，是不是看不到空白呢？呵呵
浙公网安备 33010602011771号