原文地址: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来处理。问题解决。
分享到:
相关推荐
但需要注意,这种方式只适用于IE6,对于其他现代浏览器则应该继续使用min-height属性。 在文章的实例中,通过设置一个类名为“test”的div元素的min-height为80px,我们可以看到两个相同类的div元素在内容足够的...
为了解决这个问题,一种常见的技巧是使用所谓的"hasLayout" hack,即为IE6添加`_height`属性,因为IE6会在内容超过设定高度时自动扩展元素。例如: ```css div { border: 5px solid #f00; min-height: 120px; _...
在早期的网页设计中,尤其是面对需要兼容旧版浏览器如IE6和IE7时,实现最小高度(min-height)的属性遇到了很多问题。min-height属性是CSS的属性之一,用于规定元素的最小高度,但IE6和IE7并不支持这一属性。这使得...
在这个例子中,`min-height:100px`对非IE6浏览器起作用,而`_height:100px`则是专门为IE6设定的高度。`overflow:visible`是为了确保当内容超过100px时,元素能自动延长。但是,这种方法要求整个页面的其他元素也需要...
在IE6浏览器中,`min-height`属性并不被支持,这时我们需要使用一些CSS Hack技巧来兼容。例如,可以使用下划线`_`前缀的私有属性`_height`,这仅对IE6生效。这样,对于支持`min-height`的现代浏览器,它们会使用`min...
- **min-height**:在现代浏览器中,`min-height`用于设置元素的最小高度,但在IE6和IE7中,该属性的兼容性较差,无法正确识别并应用。 - **_hack**:为了在特定的浏览器版本中应用样式,开发者通常会使用CSS hack。...
`的技巧来模拟,让IE6以外的浏览器使用min-height,而IE6则按height处理。 7. **最大高度(max-height)**: 可以通过JavaScript检测元素的scrollHeight,动态设置元素的高度,以实现类似max-height的效果。 8. **...
6. **最小高度(min-height)**:IE6不支持`min-height`属性,但可以通过CSS hack来解决,如: ```css #container { min-height: 200px; height: auto !important; /* 对其他浏览器生效 */ height: 200px; /* 对...
以下是一些关于这些浏览器之间CSS差异的关键知识点: 1. **垂直居中问题**: 在IE6、7中,实现div的垂直居中可以使用`vertical-align:middle;`配合`line-height`。但是这种方法要求内容不换行。更通用的解决方案是...
- 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设置”涉及理解并熟练运用CSS的`min-height`属性,以及掌握各种跨浏览器兼容性策略,如条件注释、CSS Hack、Flexbox、CSS Grid以及JavaScript/jQuery的解决...
IE6对于CSS的支持非常有限,例如不支持浮动元素的`clear:both`属性,不理解`min-height`和`max-height`,且对盒模型的理解与W3C标准不符,导致布局混乱。解决这些问题通常需要使用特定的hack技巧,如使用`_width`...
- 选择器Hack:如`_property`仅IE6识别,`*property`适用于IE7及以下,`<!--[if IE]>...<![endif]-->`是条件注释,仅IE浏览器解析。 - 属性内Hack:如`color: /*ie only*/ #000; color: #fff;`,IE会读取第一个,...
### CSS兼容IE6、IE7、IE8及Firefox解析与应用 #### 一、引言 随着Web技术的发展,浏览器的兼容性问题一直是前端开发者关注的重点。尤其在早期的Web开发过程中,Internet Explorer(IE)系列浏览器由于市场份额较大...
浏览器兼容性问题一直是前端开发中的重要议题,尤其是在2016年及以前,各种浏览器的市场份额和解析标准差异较大,导致开发者需要面对多种浏览器的显示差异。本文将针对标题和描述中提到的常见浏览器兼容性问题及其...
根据提供的信息,我们可以总结出以下IT知识要点,主要聚焦于IE6、IE7与IE8浏览器中的样式兼容性问题及解决方案: ### 一、IE6/IE7/IE8 浏览器兼容性概述 #### 1. **文档声明与X-UA-Compatible** - 在网页头部加入...
5. **解决IE6/7/8的min-width/min-height问题**:IE6、IE7和IE8对于`min-width`和`min-height`的支持有限,可以使用以下方法来兼容这些版本的IE: ```css #box { width: 80px; height: 35px; } ...