关于div容器在ie6下默认高度不为0（存在默认高度）

最近做项目的时候遇到一个问题，相信很多人都遇到过，就是在测试兼容性的时候，在ie6下小于12px 的背景的高度不等于原高，或许这样说你可能不是很明白，那就举个例子吧！

如图所示：


　　　　锯齿状的背景图本来是和上面和下面的背景是挨在一起的，看代码：

.bg9{ width:100%; height:8px; background:url(../images/bg9.jpg) repeat-x center center;}

　　我给他加一个边框看看：

代码：

.bg9{ width:100%; height:8px; background:url(../images/bg9.jpg) repeat-x center center; border:1px solid #000;}

　　在ie6下的效果：

　　　　


　　在其他浏览（ie7+,谷歌，火狐等等）：

　　　　


　　如图可知：在ie6下的div容器会默认有一个高度，即使你将这个容器的高度设为0都没有用，会保持他的高度不变，只有当容器的高度大于他的默认高度时才可以；

但是事实情况是我们不需要他的默认高度，那怎么办呢？

　　一查资料：得知 ie6 下的默认字体大小为12px-14px; 使得在ie6下有个最小的默认高度12px（默认高度跟你的默认字体大小有关）；

　　如何解决呢？ 有2种方法：

　　

.bg9{ width:100%; height:8px; background:url(../images/bg9.jpg) repeat-x center center; border:1px solid #000; _font-size:0px; line-height:0;}

　　第一种是设字体大小，ie6下不是有默认字体吗？我们就将默认字体去掉，将font-size设为0px，行高可设可不设，没什么关系，但此时还是会有一个2px的默认高度；如果我们一定要定义一个0px的div容器呢？那我们就用到第二种方法：

.bg9{ width:100%; height:8px; background:url(../images/bg9.jpg) repeat-x top center; border:1px solid #000; overflow:hidden;}

　　

这是解决后的ie6下的效果，跟别的浏览器就一样了

　　有默认高度不要紧，我们将高度设为0px或者是5px；然后用overflow：hidden将多余的截掉，就可以实现0高度或者小尺寸的高度了；（这里要注意：使用overflow：hidden时，背景图片的background-position：top XX,因为截取是向下截得）；

　　到此为止：妈妈再也不用担心我的DIV有默认高度了！嘻嘻！希望对你有用！