zoukankan      html  css  js  c++  java
  • 关于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有默认高度了!嘻嘻!希望对你有用!

      

  • 相关阅读:
    JDK Integer.reverse 算法实现分析
    HomeBrew更新
    时序数据简介
    MQTT协议简析
    Maven+Spring Profile实现生产环境和开发环境的切换
    Thread与Runnable的一个小陷阱
    HashMap的内部实现机制,Hash是怎样实现的,什么时候ReHash
    该不该在C#中使用var关键词
    疑难问题解决备忘录(3)——ubuntu12.04配置vsftp本地用户登录
    疑难问题解决备忘录(2)——ubuntu12.04分配swap
  • 原文地址:https://www.cnblogs.com/liugang-vip/p/3557646.html
Copyright © 2011-2022 走看看