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

时间:2021-11-11 15:36:27

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

如图所示:关于div容器在ie6下默认高度不为0(存在默认高度)

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

.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下的效果:

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

  在其他浏览(ie7+,谷歌,火狐等等):

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

  如图可知:在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容器呢?那我们就用到第二种方法:

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

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

  关于div容器在ie6下默认高度不为0(存在默认高度)   这是解决后的ie6下的效果,跟别的浏览器就一样了

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

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