甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

IE CSS Bug系列：不正确的浮动伸缩Bug

影响的IE版本

在黔西等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、成都网站设计 网站设计制作按需规划网站,公司网站建设,企业网站建设,成都品牌网站建设,全网营销推广,成都外贸网站建设公司,黔西网站建设费用合理。

这个 bug 影响 IE7、IE6

表现

跟随在其他浮动元素之后的浮动元素，设置clear属性时不能正确伸缩

教程编写时间

2009.8.18 21:17:12

描述

这是我在 Gérard Talbot 收集整理的 IE7 Bug 页面发现的bug之一（我大部分案例都是从那来的）。这个bug影响IE7跟IE6，表现就是设置了 clear 属性的浮动元素并不能正确地伸缩。我们来看一下：

演示

示例在这个独立页面

HTML代码：

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.     Here is a <div> having float: left and clear: left. As expected, 
    3.   
  
  
  3.     it takes, it occupies as much width it requires from the body's content 
    4.   
  
  
  4.     area. 
    5.
 
  •   
  •  
  •     This is the same type of <div>: a left-floated <div> with 
  •     clear: left. This <div> should use, should take, should occupy 
  •     the whole content area of the body node (expected results). However, in 
  •     Internet Explorer 7, this left-floated <div> with clear: left only 
  •     takes, only occupies a very narrow chunk of the body's content area 
  •     (actual results). More text filling. More text filling. More text 
  •     filling. More text filling. More text filling. 
  •  
  •   
  •  
  •     Here, a third <div> having float: left and clear: left. Change 
  •     your browser window viewport's width. 
  •  
  •   
    •  
    •     
    •  
    •     Here is a <div> having float: left and clear: left. As expected, 
    •     it takes, it occupies as much width it requires from the body's content 
    •     area. 
    •     
      •  
    •   
    •     
    •  
    •         This is the same type of <div>: a left-floated <div> with 
    •         clear: left. This <div> should use, should take, should occupy 
    •         the whole content area of the body node (expected results). However, in 
    •         Internet Explorer 7, this left-floated <div> with clear: left only 
    •         takes, only occupies a very narrow chunk of the body's content area 
    •         (actual results). More text filling. More text filling. More text 
    •         filling. More text filling. More text filling. 
    •     
      •  
    •   
    •     
    •  
    •         Here, a third <div> having float: left and clear: left. Change 
    •         your browser window viewport's width. 
    •     
      •  
     

    • CSS 代码：

     
 
 
        
  
  
    1. div, li { 
      2.   
  
  
    2.     background-color: #ddd; 
      3.   
  
  
    3.     border: 1px solid green; 
      4.   
  
  
    4.     clear: left; 
      5.   
  
  
    5.     color: black; 
      6.   
  
  
    6.     float: left; 
      7.   
  
  
    7. } 
      8.

    在IE6跟IE7中可以发现第二、第三个

  • 及
    不能正确地伸缩。它们被“截”短了，过早伸缩了。据Sjaak Prieste所说（Gérard Talbot在这个bug中称赞了他），原因是这样的，IE首先把该浮动元素与上一个浮动元素渲染在同一行中，然后发现’clear’属性，清除浮动将其移到下一行，但没有重新排布文本。

    我的演示中既有

    也有
  • 的原因是，这两种情况的处理方法有点区别。在“解决方案”中会有更多说明。

    解决方案

    以下是上述bug的解决方法（以类型排序）

    解决方法（对清除进行标记）

    该方法的时间

    Tue Aug 18 21:17:26 2009

    可修复的的版本

    所有受该bug影响的版本

    描述

    我找不到一个像样的办法，如果谁有比较好的、相对简洁的办法，请评论给我！下面是我的方法：

    修复bug的演示在这个独立页面

    HTML Code：

     
 
 
        
  
  
    1.  
      2.   
  
  
    2.     Here is a <div> having float: left and clear: left. As expected, 
      3.   
  
  
    3.     it takes, it occupies as much width it requires from the body's content 
      4.   
  
  
    4.     area. 
      5.
    •  
  •  
  •  
  •     This is the same type of <div>: a left-floated <div> with 
  •     clear: left. This <div> should use, should take, should occupy 
  •     the whole content area of the body node (expected results). However, in 
  •     Internet Explorer 7, this left-floated <div> with clear: left only 
  •     takes, only occupies a very narrow chunk of the body's content area 
  •     (actual results). More text filling. More text filling. More text 
  •     filling. More text filling. More text filling. 
  •  
  •  
  •  
  •     Here, a third <div> having float: left and clear: left. Change 
  •     your browser window viewport's width. 
  •  
  •   
  •  

    • CSS Code：

     
 
 
        
  
  
    1. div { 
      2.   
  
  
    2.     background-color: #ddd; 
      3.   
  
  
    3.     border: 1px solid green; 
      4.   
  
  
    4.     clear: left; 
      5.   
  
  
    5.     color: black; 
      6.   
  
  
    6.     float: left; 
      7.   
  
  
    7. } 
      8.   
  
  
    8. .ie_fix { display: inline-block; } 
      9.   
  
  
    9. .ie_fix { display: block; } 
      10.

    看下这边我做的事。在示例中的div部分，我在各div之间插入一个额外的元素，并且通过 {display: inline-block;}给它一个”布局”(layout),然后设置其display属性为block。

    因为

  • 元素之间插入元素不大合适，在示例的