`

关于min-height的IE6及以下浏览器的Hack(转)

阅读更多

原文地址:http://hi.baidu.com/%C5%AC%C1%A6%B1%D8%D3%D0%CB%F9%B3%C9/blog/item/bed0b71ab5e723fdae51335d.html

 

刚刚做网站的时候遇到一个浏览器最小高度min-height 在IE6中不能自动伸展的问题,在网上找到了答案!

例如:

#container{

height:500px;

background:#00F;

}

#page{

min-height:500px;

background:#F00;

}

<div id="container">

<div id="page"></div>

</div>

page层内容少,页面很矮,加了min-height后FF与IE7.0中page层可以覆盖住container的背景色。而IE6及以下min-height无法辨认,所以露出了我不想让他露出来的container层的红色背景。

最简单的办法还是hack吧。

#page{

background:#F00;

min-height:500px;
height:auto !important;
height:500px;

}

这样IE6中page的确有了最小高度,能覆盖住container,但是其实也只有500px这么一个高度,等到内容多了这个page也不会自动拉长了,这样不行,折腾多时,终于找到个方法可以解决IE又有最小高度又能自动拉伸的目标:

#page{

background:#F00;

min-height:500px;
height:auto !important;
height:500px;

overflow:visible;

}

就是这句overflow:visible使IE们能够当作height:auto来处理。问题解决。

分享到:
评论

相关推荐

    CSS中height和min-height的区别

    但需要注意,这种方式只适用于IE6,对于其他现代浏览器则应该继续使用min-height属性。 在文章的实例中,通过设置一个类名为“test”的div元素的min-height为80px,我们可以看到两个相同类的div元素在内容足够的...

    min-height和min-width两个最小高度和最小宽度兼容多浏览器版本

    为了解决这个问题,一种常见的技巧是使用所谓的"hasLayout" hack,即为IE6添加`_height`属性,因为IE6会在内容超过设定高度时自动扩展元素。例如: ```css div { border: 5px solid #f00; min-height: 120px; _...

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

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

    IE 6不支持min-height或max-width等属性的完美解决方案

    在这个例子中,`min-height:100px`对非IE6浏览器起作用,而`_height:100px`则是专门为IE6设定的高度。`overflow:visible`是为了确保当内容超过100px时,元素能自动延长。但是,这种方法要求整个页面的其他元素也需要...

    Web前端新人笔记之height、min-height的区别详解

    在IE6浏览器中,`min-height`属性并不被支持,这时我们需要使用一些CSS Hack技巧来兼容。例如,可以使用下划线`_`前缀的私有属性`_height`,这仅对IE6生效。这样,对于支持`min-height`的现代浏览器,它们会使用`min...

    ie6,ie7div高度兼容代码

    - **min-height**:在现代浏览器中,`min-height`用于设置元素的最小高度,但在IE6和IE7中,该属性的兼容性较差,无法正确识别并应用。 - **_hack**:为了在特定的浏览器版本中应用样式,开发者通常会使用CSS hack。...

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

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

    解决IE6兼容问题的十一大技巧

    6. **最小高度(min-height)**:IE6不支持`min-height`属性,但可以通过CSS hack来解决,如: ```css #container { min-height: 200px; height: auto !important; /* 对其他浏览器生效 */ height: 200px; /* 对...

    CSS浏览器兼容,描述ie6 7 8和火狐浏览器上的css区别

    以下是一些关于这些浏览器之间CSS差异的关键知识点: 1. **垂直居中问题**: 在IE6、7中,实现div的垂直居中可以使用`vertical-align:middle;`配合`line-height`。但是这种方法要求内容不换行。更通用的解决方案是...

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

    - IE6不支持`min-height`和`min-width`属性,但可以通过使用下划线`_`前缀和表达式(如 `_height:expression(this.scrollHeight );`)来模拟这些效果。 - 同理,`max-height`和`max-width`也可以通过类似的表达式...

    常见浏览器兼容性问题与解决方案

    `min-height`在旧版本的IE浏览器中不支持,可以使用CSS Hack或者使用`height`和`overflow`的组合来模拟`min-height`的效果。 总结来说,解决浏览器兼容性问题需要对各种浏览器的解析规则有深入理解,通过适当的CSS...

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

    总结来说,实现“最小高度能自适应高度IE.FF全兼容的div设置”涉及理解并熟练运用CSS的`min-height`属性,以及掌握各种跨浏览器兼容性策略,如条件注释、CSS Hack、Flexbox、CSS Grid以及JavaScript/jQuery的解决...

    IE6-IE11兼容性问题列表及解决办法

    IE6对于CSS的支持非常有限,例如不支持浮动元素的`clear:both`属性,不理解`min-height`和`max-height`,且对盒模型的理解与W3C标准不符,导致布局混乱。解决这些问题通常需要使用特定的hack技巧,如使用`_width`...

    CSS常见浏览器兼容问题

    - 选择器Hack:如`_property`仅IE6识别,`*property`适用于IE7及以下,`&lt;!--[if IE]&gt;...&lt;![endif]--&gt;`是条件注释,仅IE浏览器解析。 - 属性内Hack:如`color: /*ie only*/ #000; color: #fff;`,IE会读取第一个,...

    CSS兼容IE6,,IE7,I8 FIREFOX

    ### CSS兼容IE6、IE7、IE8及Firefox解析与应用 #### 一、引言 随着Web技术的发展,浏览器的兼容性问题一直是前端开发者关注的重点。尤其在早期的Web开发过程中,Internet Explorer(IE)系列浏览器由于市场份额较大...

    2016年度最全整理浏览器兼容性问题与解决方案

    浏览器兼容性问题一直是前端开发中的重要议题,尤其是在2016年及以前,各种浏览器的市场份额和解析标准差异较大,导致开发者需要面对多种浏览器的显示差异。本文将针对标题和描述中提到的常见浏览器兼容性问题及其...

    IE678个人总结的式样问题

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

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

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

Global site tag (gtag.js) - Google Analytics