html - IE 6/7 和 float

Question

因为这个问题，我的额头被挫伤了。在符合标准的浏览器中，我的布局看起来不错，但是，当然，IE7 和 IE6 喜欢把所有东西弄得一团糟。我正在尝试制作一个简单的标题，左侧有一些文本，右侧有一个内联表单。标题为 835 像素宽，并使用自动边距居中。这是我的代码:

<div id="header"> 
    <span>Some Text</span>
        <div style="display: inline; float: right; margin-top: 6px; position: relative;">
            Jump to: <form ... style="display: inline;"> blah blah </form> 
        </div>
</div>

据我所知，IE6/7 正在将包含表单的 div 视为 block 元素。它正确显示在标题 div 的右侧，但被向下推。我试过给内部 div 一个宽度和绝对位置，但无济于事。如果可能的话，我实际上想避免绝对定位和条件语句。必须有一些我忽略的东西。有什么建议吗？

更新:这是 IE7 的屏幕截图 alt text http://vincentalcivar.com/ie7.png

Answer 1

更改 <span>Some Text</span>至 <span style="float: left;">Some Text</span> .

此外，您可能想要删除删除 margin-top: 6px; position: relative;来自 DIV .

编辑:这是代码。

<div id="header"> 
  <span style="float: left;">Some Text</span>
  <div style="display: inline; float: right;">
    Jump to: <form style="display: inline; margin: 0;"> blah blah </form> 
  </div>
  &nbsp;
</div>

添加了一个   (并删除了 overflow: auto; )，因为 IE6 认为该行在 float 后没有内容。