`
cloudstars
  • 浏览: 40454 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

兼容IE6/7/FF的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也能自动增加盒子的高度。

分享到:
评论

相关推荐

    min-height最小高度实现的解决方法,(兼容IE6、IE7、FF、Chrome)

    在早期的网页设计中,尤其是面对需要兼容旧版浏览器如IE6和IE7时,实现最小高度(min-height)的属性遇到了很多问题。min-height属性是CSS的属性之一,用于规定元素的最小高度,但IE6和IE7并不支持这一属性。这使得...

    div错位解决IE6IE7IE8样式不兼容问题

    5. **解决IE6/7/8的min-width/min-height问题**:IE6、IE7和IE8对于`min-width`和`min-height`的支持有限,可以使用以下方法来兼容这些版本的IE: ```css #box { width: 80px; height: 35px; } ...

    CSS min-height IE6、IE7、FF下DIV自适应高度

    然而,在不同的浏览器中,min-height 属性的兼容性可能会有差别,特别是对于较旧的浏览器,比如 Internet Explorer 6、7(IE6、IE7),以及较早版本的 Firefox(FF)。 IE6 和 IE7 是较早的 Internet Explorer 版本...

    DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf

    本文档“DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf”主要关注如何处理Firefox和不同版本的Internet Explorer(IE6、IE7、IE8、IE9)之间的CSS差异。以下是一些关键知识点的详细说明: 1. **CSS Hack**: - CSS Hack...

    IE6 7和FF兼容性

    【CSS兼容性问题详解——IE6、IE7与Firefox】 在网页开发中,尤其是在使用CSS进行布局和样式设计时,跨浏览器的兼容性是开发者必须面对的重要问题。IE6、IE7和Firefox作为曾经和现在仍有一定用户量的浏览器,它们对...

    最小高度能自适应高度IE.FF全兼容的div设置.rar

    主要涉及到CSS(层叠样式表)中的最小高度(min-height)属性以及如何实现跨浏览器的兼容性,特别是针对Internet Explorer(IE)和Firefox(FF)这两个广泛使用的浏览器。 最小高度属性`min-height`允许我们为HTML...

    ie和ff浏览器的兼容

    .min-height-div { height: auto !important; height: 200px; min-height: 200px; } ``` 这样可以确保在IE6中也能正确显示高度。 #### 12. 自动换行的兼容性 在FF中,可以使用`word-wrap: break-word`来实现...

    ie和ff兼容性大集合

    ### IE和FF兼容性大集合 随着互联网技术的迅速发展,各式各的浏览器层出不穷,而浏览器之间的兼容性问题成为开发者必须面对的一个挑战。本文将基于实际经验与网络资源,总结Internet Explorer (IE) 和 Firefox (FF)...

    (十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.docx

    - IE6不支持`min-height`,可以使用`_height`(下划线前缀)来模拟。 - IE6不识别`!important`,需要使用下划线或星号前缀来设置专有样式。 7. **触发IE的布局属性**: 对于包含浮动元素的容器,需要触发其...

    DIV+CSS 兼容性 IE FF

    ### DIV+CSS 兼容性 IE FF:深入探讨浏览器间的差异与共通点 #### 一、引言 随着Web技术的发展,DIV+CSS布局已成为网页设计中的主流方式。然而,在实际开发过程中,不同的浏览器(如Internet Explorer 6/7/8、Fire...

    IE678个人总结的式样问题

    根据提供的信息,我们可以总结出以下IT知识要点,主要聚焦于IE6、IE7与IE8浏览器中的样式兼容性问题及解决方案: ### 一、IE6/IE7/IE8 浏览器兼容性概述 #### 1. **文档声明与X-UA-Compatible** - 在网页头部加入...

    IE6,IE7,FF等浏览器不兼容原因及解决办法

    ### IE6、IE7、Firefox等浏览器不兼容的原因及解决办法 #### 一、引言 随着Web技术的发展,浏览器的兼容性问题一直是前端开发者面临的重要挑战之一。尤其是在早期的Web开发时代,如IE6、IE7以及较早版本的Firefox等...

    浏览器Firefox与IE在CSS样式表中的差异汇编.pdf

    - 为了针对Firefox、IE6、IE7实现不同的样式效果,开发者通常使用CSS Hack。例如,对于颜色的设置,可以写成: ```css #1 { color: #333; } /* Moz for Firefox */ * html #1 { color: #666; } /* IE6 */ ...

    CSS HACK收集:关于IE6/FF/google等浏览器hack的方法详细

    `的技巧来模拟,让IE6以外的浏览器使用min-height,而IE6则按height处理。 7. **最大高度(max-height)**: 可以通过JavaScript检测元素的scrollHeight,动态设置元素的高度,以实现类似max-height的效果。 8. **...

    css浏览器兼容整理

    #### 一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSShack兼容一览表 为了确保网站能在不同的浏览器中呈现出一致的效果,了解和掌握各种CSS hack技巧是非常重要的。以下是一些常用且有效的CSS hack方法: 1. **区别IE...

Global site tag (gtag.js) - Google Analytics