IE8下DIV嵌套出现错误解决方案

这里和大家分享一下IE8下DIV嵌套出现错误解决方案，最近用DIV写了几个网页，一开始呢，从来没有在IE8下面测试过，最近升级了IE8，发现了好些问题，一开始用IE6和IE7都没有的新问题出现了，大概就是以下的三种方法，请看详细介绍。

IE8下DIV嵌套出现错误解决方案

最近用DIV写了几个网页，一开始呢，从来没有在IE8下面测试过，最近升级了IE8，发现了好些问题，一开始用IE6和IE7都没有的新问题出现了，大概就是以下的三种方法，与君共勉！ 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.
 
  •  
    •  
  •  
  •  
  •  

    •  当b1和b2都是float=left时候，a1层的高度不会被b1和b2的高度撑开。(这个现象只有IE8发生，其他版本IE以及IE8选择兼容模式后就没有问题。)

    解决方法：a1的display=table

    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

    不同的浏览器对CSS的解析可能存在出入，因此能在IE6和IE7正常显示的CSS+DIV页面在IE8和FF（即Firefox）浏览器中未必正常，需要格外留意。以下代码在FF和IE8下无法正常显示出DIV块的内容，仅有一条两个像素高度的红线（其实是上、下边框挤在一处的结果）——

    CSS:

     
 
 
 
      
  
  
  
  
    1. #main{  
      2. 
  
  
  
  
    2. margin:auto;  
      3. 
  
  
  
  
    3. width:400px;  
      4. 
  
  
  
  
    4. background-color:#336699;  
      5. 
  
  
  
  
    5. border:1pxsolid#ff0000;  
      6. 
  
  
  
  
    6. }  
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8. DIV: 
      9. 
  
  
  
  
    9.  
      10.

     IE8和FF浏览环境下的DIV嵌套效果：

    这意味着，当我们把main作为DIV的父层，里面嵌套若干子层的DIV时，父层的样式将是被忽略的或者根本就是无效的，这将可能发生严重的问题。我们必须找出原因。原来，在IE8和FF环境下，一个没有任何内容的不定义高度的DIV是不会显示的。以上代码中，我们若给main定义一个高度，或将改为Hello，IE8和FF下将正常显示我们预设的效果。

    嵌套DIV之后情形又如何呢？

    里层的DIV是否被IE8和FF视为实体HTML元素？现在我们就来试验一下DIV嵌套效果：

    CSS:

     
 
 
 
      
  
  
  
  
    1. #main{  
      2. 
  
  
  
  
    2. margin:auto;  
      3. 
  
  
  
  
    3. width:400px;  
      4. 
  
  
  
  
    4. background-color:#336699;  
      5. 
  
  
  
  
    5. border:1pxsolid#ff0000;  
      6. 
  
  
  
  
    6. }  
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8. #sub{  
      9. 
  
  
  
  
    9. width:200px;  
      10. 
  
  
  
  
    10. background-color:#aaa;  
      11. 
  
  
  
  
    11. float:left;  
      12. 
  
  
  
  
    12. }  
      13. 
  
  
  
  
    13.  
      14. 
  
  
  
  
    14. DIV:  
      15. 
  
  
  
  
    15.  
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.  
      18. 
  
  
  
  
    18. HelloWorld!
      HiGod!  
      19. 
  
  
  
  
    19.  
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.  
      22.

    在IE8和FF下的DIV嵌套效果如下图所示：

       

    显然，id为main的父层DIV嵌套没有被id为sub的里层子DIV撑高，整体样式出现严重的走样效果。一个简便的处理方法是，在***一个子层DIV结束之后加上一个高度为0像素的DIV，且该DIV不允许两边有浮动对象：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. HelloWorld!
      HiGod!
      OK?  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.  
      8.

    第二种解决方法是定义一个CSS类：

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

    然后将父层DIV代码中的改为。

    以上两种方法都将出现如下图所示的DIV嵌套效果：

    当前题目：IE8下DIV嵌套出现错误解决方案
    网页地址：http://www.shufengxianlan.com/qtweb/news22/345672.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    App设计知识

    分类信息网

    网站制作价格　　 　腾讯云免备案主机　　 　路面机械及配件　　 　成都网站改版　　 　网站设计　　 　成都雨棚定制　　 　定制网站设计　　 　梦港之夜　　 　做网站　　 　金融行业网站建设方案　　 　成都门户网站建设　　 　高端品牌网站建设　　 　成都画册设计公司　　 　四川审计公司　　 　四川门窗　　 　四川成都seo网站优化　　 　四川平武网站建设　　 　成都展柜设计公司　　 　成都网站建设　　 　网站快速收录