注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

DIV嵌套时外层无法自适应高度三种解决方案  

2016-09-08 13:00:45|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这里向大家描述一下解决DIV嵌套时外层(父层)无法自适应高度的方法,原本自己写的CSS代码是没有错误的,但是为什么在新版的浏览器中会发现使用DIV嵌套时外层(父层)无法自适应高度的错误,这里看一下解决方案。

如何解决DIV嵌套时外层(父层)无法自适应高度?

相信很多朋友在使用CSS+DIV过程中都会遇到这个问题,特别是目前的浏览器版本越来越多,更新的也非常快,对CSS的支持和要求越来越高,如IE8、IE9、FF、chrome等等浏览器,虽然对CSS支持完美,但是也有些错误,导致DIV+CSS的排版出现验证问题。

原本自己写的CSS代码是没有错误的,但是为什么在新版的浏览器中会发现使用DIV嵌套时外层(父层)无法自适应高度的错误,完美所写的代码在IE6上能完美的展示出来,但是在IE8、FF上却出现不适应高度的问题,难道是CSS不兼容浏览器?下面就来说说其解决方法。

假如完美的CSS代码已经通过了W3C的验证,那就说明,我们写的代码完全是没有错误的,那么是说明原因呢?这个原因我也说不清楚,在网上查了好久,我也没有查到原因,但是查到了相关的解决办法,网上的解决办法有3种,但是我觉得不完美,下面列出网上的我查找到的解决方法。

1、在外层的CSS代码中加入display:table

2、第二种解决方法是定义一个CSS类:

  1. .box:after{  
  2. content:".";  
  3. display:block;  
  4. height:0px;  
  5. clear:both;  
  6. visibility:hidden;  
  7. }  
  8.  

然后将父层DIV代码中的<divid="main">改为<divid="main"class="box">。

3、在外层(父层)CSS代码中加入overflow:auto;

在我使用了上面3种方法后,我觉得只有第3种方法有效,但是其效果不是很好,但是不会出现异常,不过为了更完美的解决这个问题,我介绍一个很有效的方法给大家试试,这个方法绝对有效,而且也是很简单的。

最终解决方法:根据上面的3个方法,最终我的解决方法是,在外层(父层)CSS代码中加入下面两个属性值(一个都不能少)。 

  1. clear:both;overflow:auto;  
  2.  
  评论这张
 
阅读(68)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017