当前位置:首页 > 开发 > Web前端 > 前端 > 正文

兼容IE6/7/FF的min-height的实现

发表于: 2015-05-13   作者:cloudstars   来源:转载   浏览:
摘要:        布局过的人都知道CSS的最小高度min-height是个很有用的属性,它可以让很短的内容也有一个很合适的高度,使页面显得美观。但很可惜IE6不支持这一属性。怎么办呢?我们可以用另外一种方法让IE6也有最小高度min-height属性的效果。       众所周知,如果内容超

       布局过的人都知道CSS的最小高度min-height是个很有用的属性,它可以让很短的内容也有一个很合适的高度,使页面显得美观。但很可惜IE6不支持这一属性。怎么办呢?我们可以用另外一种方法让IE6也有最小高度min-height属性的效果。

      众所周知,如果内容超过元素的高度,那么IE6是会自动增加元素的高度,即使你明确的定义了元素的高度。我们可以利用IE6的这个bug来让IE6也有最小高度min-height属性的效果。

  E6对于overflow的特殊实现,给我们实现min-height提供了一个思路,所以产生了以下兼容IE6、IE7、FF浏览器的min-height写法:

.minh{

    min-height: 100px;

    height: auto!important;

    height: 100px;

    overflow: auto;

    _overflow: visible;

}

 

解释:

1、由于IE6对!important的解释存在bug,所以它只识别height: 100px这一句,超过100px后,IE6自身会增加盒子的高度,另外_overflow: visible也起作用了;

2、IE7和其他标准浏览器三句都能识别,虽然定义height: 100px,但我们又有了height:auto !important,所以超过100px也能自动增加盒子的高度。

兼容IE6/7/FF的min-height的实现

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号