ie6 float:right display:inline-block(display:inline)答案

【问题标题】：ie6 float:right display:inline-block(display:inline)ie6 float:right display:inline-block(display:inline)
【发布时间】：2012-07-13 01:36:16
【问题描述】：

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

代码输入：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;
}

【问题讨论】：

我们能知道您所面临的具体问题是什么吗？
@freebird，我将代码复制到 jsfiddle，你可以在你的 ie6 中测试，span 在新行中。但我需要div 内的跨度，在text 和float:right 之后。
是的，我测试并得到了问题，它在 IE 更高版本中工作正常吗？

标签： internet-explorer-6 css-float

【解决方案1】：

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

HTML

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

CSS

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

这里是jsFiddle。

【讨论】：