ie6 float：右显示：内联块（显示：内联）

Question

如何使用display:inline-block(display:inline)中的float:right修复ie6？

代码：http://jsfiddle.net/VGaGt/

HTML

<div>
    text<span>>></span>
</div>​

css

div{
    float:left; 
    width: 300px;
    height: 20px; 
    padding:5px;
    background:#ccc;
}
span{
    float:right;
    width:20px;
    height:20px;
    display:inline-block;
    zoom:1;
    *display:inline;
    cursor: pointer;
}​

Answer 1

你的文字占用了IE6中整个div的宽度，这就是span打破这一行的原因。一种选择是将文本包装在p标签中，将其浮动到左侧并通过将宽度设置为200px或类似的值来控制其宽度。

HTML

<div>
  <p>text</p><span>>></span>
</div>

CSS

p {
  float:left;
  width:100px;
}

这是jsFiddle。