解决div嵌套时IE8和FF无法自适应高度

解决div嵌套时IE8和FF无法自适应高度
还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为height:auto;可是问题就出现了,在IE6和IE7下父DIV的高度可以自适应而在IE8和FF下却不可以,于是我开始在网上搜索,嘿嘿,现在的网络知识共享真好,让我找到解决办法了!
在父DIV的CSS中添加两个属性值 clear:both; overflow:auto; OK啦!希望对遇到同样问题的朋友能有帮助!

IE8下高度无法自适应的问题:

页面在设计的过程中,常常会遇到页面高度随着内容的高度而变化,height:auto;但是在ie8下,如果设置height:auto;的话,内容却无法撑开整个div,但在ie6下就不会出现这样的问题。

因此只要设置一个样式,编写在高度自适应的div中即可

.clear_float{ height:auto; clear:both; font-size:0;}
<div style="height:auto;width:980px;">
<div class="clear_float"></div>
</div>

这里还设置了容器字体大小, font-size:0;是为了消除ie6下,div的一个默认高度。

时间: 2024-07-29 20:06:07

解决div嵌套时IE8和FF无法自适应高度的相关文章

Android - 解决ViewPager嵌套时在API 13及其以下版本中不能滑动的问题

通过对ViewPager事件处理的分析发现解决此问题的关键点在于判断是否可以横向滑动的部分,也就是canScroll(View, boolean, int, int, int)方法 在此方法中先依次递归判断子View是否可以横向滑动,在最后一行则判断自己是否可以横向滑动.关键处在于调用了ViewCompat.canScrollHorizontally(View, int)方法来判断是否可以横向滑动.进一步查看ViewCompat.canScrollHorizontally(View, int)的

div嵌套margin-top失效的解决方法

近日学习过程中,出现一个问题:内外多层div嵌套时,margin-top不起作用,margin-left起作用,查询百度,有结果: 当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素. 经过测试,得如下解决方法,详请见代码中的注释: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

DIV+CSS解决IE6,IE7,IE8,FF兼容问题

DIV+CSS解决IE6,IE7,IE8,FF兼容问题1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/> 2. 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如margin-left:10px!

div嵌套div 背景图片 不显示的问题

这几天 在做一个小Demo的时候碰到了如上的问题,一个DIV嵌套多个DIV时,父容器DIV不显示背景图片.同时结合之前碰到类似的问题,我归纳了如下几个解决方法: 1.就是常见的 子div 背景把父div的背景给盖住了,例子: 该例子就是 我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的,其中父div的背景图片就是上面这张图片(箭头部分是透明的),子div的背景图片是那种渐变灰色图片,其实懂英语的人应该看出来了就是,我想实现一个那种类似于iphone滑动那种灯光从

div嵌套引起的margin-top不起作用

通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值,为什么会出现这种情况??? 这是因为嵌套div中margin-top出现转移,在部分浏览器中,两个嵌套的div,如果外层父元素div的padding值为0,那么内层div的margin-top,margin-bottom值

css解决div的各种浏览器兼容性问题

方法一: 1 min-height:500px;/*解决ie8.9.ff.chromet*/ 2 height:100%;/*解决ie6.7*/ 3 _height:500px;/*解决ie6超出自动溢出*/ 方法二: 1 min-height:400px;/*解决ie8.9.ff.chrome*/ 2 *+height:100%;/*解决ie7*/ 3 _height:400px;/*解决ie6超出自动溢出*/  方法三: 1 min-height:400px; height:auto!imp

CSS: 解决Div float后,父Div无法高度自适应的问题

在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整.要解决这个问题(也叫做闭合(清除)浮动),我们有四种办法: 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签.我个人比较喜欢这种方法,因为它简单.实用.浏览器兼容性好,而且这种方法也是W3C推荐的方法 <div

实战案例:DIV嵌套

缘于页面结构语义化的考虑,我们应该慎用div和span这两个通用元素,只有当划分页面结构模块时才使用div元素,因为模块本身是没有任何语义的,他仅代表一块独立的结构.如果想对段落内部分内联元素或文本应用某种特殊样式时,就可以使用span元素把他们独立封装在一个容器内. div作为布局元素,它与表格一样是可以嵌套的.因为浏览器对于任何元素的解析方式都是一样的,一般从最里层开始,然后不断向外解析.当嵌套层级很深时,将会使浏览器消耗更多的资源对嵌套关系进行解析,势必会影响浏览器的速度. 对于一个上下三

简单灵活解决 Viewgroup嵌套 产生的手势冲突问题

转载请标明原文地址:简单灵活解决 Viewgroup嵌套 产生的手势冲突问题 这是接着上一篇Android 下拉刷新上拉加载 多种应用场景 超级大放送(上)的,这里介绍一下怎么 简单灵活解决Viewgroup嵌套产生的手势冲突问题.虽然这里只是以ViewPager为例,但是提供了一种解决此类问题的通用思路. 先来看一下网易新闻客户端的界面效果: 当手势方向为蓝色箭头区域方向时,响应ListView的滑动 当手势方向为黄色箭头区域方向时,响应ViewPager的图片滑动 上一篇实现的Demo效果图