css - 仅限 IE6 中的 Div 包装

Question

您可以在此处查看问题:http://jsfiddle.net/6WuVz/7/

这适用于所有其他浏览器(图片顶部)，但在 ie6(图片底部)中查看时它会错误地换行:

注意:通过使用兼容性 View 并选择 IE5 Quirks，您可以在更高版本的 IE 中看到这一点。

Answer 1

据我所知，包含标题的 div 没有设置宽度。因此，IE 告诉它扩展，并且随着它的扩展，它向下移动，那里有空间。尝试仅针对 IE6 设置宽度，看看是否能解决问题。

此外，IE6 has some issues with overflow: hidden .虽然它通常与 position: relative 结合使用，但您可能会遇到类似的情况。如果之前的解决方案不起作用，您可以试试这个。

编辑 - 由于您不想设置明确的宽度，我想到了一些其他选项留给您:

1. 在非 float 元素上显式设置clear: none
2. 对相关文本使用 span 元素而不是 div(span 是内联的，而 div是 block ，所以它不应该扩展到父宽度；考虑到你正在做的事情，无论如何使用 span 可能更有语义意义。
3. 使用 JavaScript 为 IE6 确定 float div 的宽度，并相应地设置非 float div 的大小(同样，您可以在您的 HTML 专门针对 IE6)
4. 认真考虑是否值得支持 IE6(即 - 如果这是在一个受众相当精通技术的网站上，您可能可以完全放弃 IE6 支持，或者至少，解决这个问题会使您的元素花费更多比你得到的返回；但如果你与医疗保健提供者打交道，你可能仍然需要处理 IE6)。

IE6 有一个非标准的盒子模型，它告诉 block 级元素扩展它们容器的整个宽度，而不是“收缩包装”到它们的内容。它们的内容大于它们允许的宽度，并且 float 属性将 float 元素从文档流中取出(这就是为什么你的 overflow: hidden，当转动到 overflow: visible，在 float 内容之上运行)。较新的浏览器基本上具有 float 属性的“更新定义”(可以这么说)，它告诉兄弟内容围绕 float 元素流动，除了将其从正常文档流中取出。 CSS-tricks has a good article on float , A List Apart 也是如此，如果您需要更多信息。