IE 6/7和浮动

我的额头因挫折而受挫。在符合标准的浏览器中，我的布局看起来很好，但是，当然，IE7和IE6喜欢把所有东西搞得一团糟。我正在尝试制作一个简单的标题，其中有一些文本在左侧，右侧是内嵌表单。标题宽835px，并使用自动边距居中。这是我的代码：IE 6/7和浮动

<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。它正确显示在标题div的右侧，但被推下。我试图给内部div一个宽度和绝对位置，但无济于事。如果可能，我实际上希望避免绝对定位以及条件语句。必须有一些我忽略的东西。有什么建议么？

更新：这里是IE7 截图alt text http://vincentalcivar.com/ie7.png

来源

2010-07-24 vince88

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

此外，您可能需要删除以从DIV删除margin-top: 6px; position: relative;。

编辑：这是代码。

<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认为该行有花车后没有内容。

来源

2010-07-24 13:18:17

这似乎适用于IE浏览器，但会导致其余浏览器不正确地显示页面内容的其余部分。我会研究可能改变其他元素的属性，看看是否有效。 – vince88 2010-07-24 13:30:43

hmm。到目前为止，解决方案似乎在内部div之后添加了

，并且清除了其他内容的问题，并且使得它在每个浏览器中都可以正常显示。这可能不是最优雅的解决方案，因为它增加了更多的标记。有没有更好的办法？ – vince88 2010-07-24 13:42:26

现在，它在所有浏览器中都能很好地工作......并且在IE6中也是如此。 :) – 2010-07-24 13:51:16

我不知道为什么你所标记的元素，如你有，但对一些文本的左侧和形式的权利，我会做如下：

<div id="header"> 
    <div id="text_holder"> 
     <p>Lorem ipsum dolor set amet.</p> 
    </div> 
    <form> 
     ... 
    </form> 
</div>

下面CSS：

#header { 
    width: 835px; 
    margin: 0 auto; 
    overflow: auto; 
} 
#text_holder { 
    float: left; 
} 
#header form { 
    float: right; 
}

来源

2010-07-24 13:11:19

我没有在时刻访问IE6/7。但是，每个浏览器都有浮动错误。添加zoom: 1的CSS属性将触发hasLayout这些元素，并帮助他们呈现如预期。

虽然您不需要通过条件样式表添加它，但我会推荐它，因为它是浏览器特定的修补程序。

有可能您的某些其他样式有冲突。我不知道你是否试图解决这个问题，但display: inline应该没有必要。

它可能会帮助张贴在IE6/7的东西看起来的屏幕截图。

来源

2010-07-24 13:14:56

回答

相关问题