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


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

    如图所示:

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

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

      我给他加一个边框看看:

    代码:

    .bg9{ 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{ 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{ 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有默认高度了!嘻嘻!希望对你有用!

      

  • 相关阅读:
    IE window对象跨域的一些特性
    杭州归来
    网上流行的JS HTMLDecode不安全
    看到的一点进步
    开春第一趟单骑上妙峰
    把JS函数转URL形式
    firebug也支持debugger关键字了
    发现一篇关于flash垃圾回收机制的文章
    Java 内存分析图
    继承中多态的灵活使用及其分析图 第一个程序的升级版
  • 原文地址:https://www.cnblogs.com/liugang-vip/p/3557646.html
Copyright © 2020-2023  润新知