css - 仅在 IE6 中换行

Question

你可以在这里看到这个问题：http: //jsfiddle.net/6WuVz/7/

这适用于所有其他浏览器（图像顶部），但在 ie6（图像底部）中查看时，它会错误地换行：

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

Answer 1

据我所知，包含标题的 div 没有固定宽度。因此，IE 告诉它扩展，当它扩展时，它会向下移动，那里有空间。尝试仅为 IE6 设置宽度，看看是否可以解决问题。

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

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

1. clear: none在非浮动元素上显式设置
2. 使用span元素而不是有div问题的文本（span是内联的，div而是块的，所以它不应该扩展到父宽度；考虑到你在做什么，无论如何使用它可能更有意义span）。
3. 使用 JavaScript 确定divIE6 的浮动宽度，并相应地设置非浮动的大小div（同样，您可以在 HTML 中使用条件注释来专门针对 IE6）
4. 认真考虑是否值得支持 IE6（即 - 如果这是在一个受众相当精通技术的网站上，您可能完全可以放弃对 IE6 的支持，或者至少，解决这个问题将花费您的项目而不是回报你明白了；但如果你正在与医疗保健提供者打交道，你可能仍然必须与 IE6 打交道）。

IE6 有一个非标准的盒子模型，它告诉块级元素扩展其容器的整个宽度，而不是“收缩包装”到它们的内容。它们的内容大于它们允许的宽度，并且该float属性将浮动元素从文档流中取出（这就是为什么您的overflow: hidden，当变成 时overflow: visible，会超出浮动内容的顶部）。较新的浏览器基本上具有属性的“更新定义”（可以这么说）float，它告诉兄弟内容围绕浮动元素流动，除了将其从正常的文档流中取出。CSS-tricks 有一篇关于 float 的好文章，A List Apart也是如此，如果您需要更多信息。