IE6/IE7之浮动元素最后一个字母重复Bug

影响版本

这个bug影响: IE7, IE6

症状

浮动元素最后一个字母重复

描述

IE6和IE7中浮动元素的最后一个字符重复，让我们看一下例子:

例子

可用的例子在 separate page

HTMLCode:

<div> <p> <span>A</span> <span>B</span> <span>C</span> </p> </div> 

CSSCode:

div { width: 100px; } p { margin-right: 1px; } span { float: left; width: 120px; }

造成bug的原因是: 我们有一个确定宽度的div元素. 在这个div中有一个属性margin-right属性设置为任何非0数值的 <p> 元素(margin is not required in IE6). 在这个P元素中有三个float属性设置为left，并且宽的设置为大于父容器div宽度的宽度值的span元素.浏览器中发生了什么，最后一个字母C在下一行重复我强调过要有三个float元素, 如果没有三个;bug就不会出现，如果多于三个，bug就会出现 "Float Squeeze Weird Gap Bug" .

解决

修正版本

所有版本

描述

注意: 这个bug也通过 CS solution to "Float Squeeze Weird Gap Bug"修正

我们将要用IEbug修正瑞士军刀来修正这个bug，不，我不是在说layout属性，即时给我们的胖元素设置了layout，那么也只能修正IE7中的bug，而不能修正IE6，让我们看一下例子:

修正的例子在 separate page

HTMLCode:

<div> <p> <span>A</span> <span>B</span> <span>C</span> </p> </div> 

CSSCode:

div { width: 100px; } 
 

 p { margin-right: 1px; }  

span { float: left; width: 120px; position: relative; }

唯一改变了的是我们添加 position property 并设置属性 relative 在我们的浮动元素span上.  在 IE7 还是 IE6中重复的字幕不会出现了.