Div仅在IE6中包装

Question

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

这适用于所有其他浏览器（图像顶部），但在ie6（图像底部）中查看时，它包装不正确：

注意：您可以在IE的更高版本中使用兼容性视图并选择IE5 Quirks来查看。

Answer 1

据我所知，拥有你的标题的div没有设定的宽度。因此，IE正在告诉它扩展，并且当它扩展时，它向下移动，有空间。尝试仅为IE6设置宽度，看看是否修复了它。

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

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

1. 在非浮动元素上明确设置clear: none
2. 使用span元素代替div来处理相关文字（span是内联的，而div是阻止的，因此不应该扩展为父级宽度;考虑到你正在做的事情，无论如何，使用span可能会更具语义意义。
3. 使用JavaScript确定IE6的浮动div的宽度，并相应地设置非浮动div的大小（同样，您可以在HTML中使用条件注释来专门针对IE6） ）
4. 认真考虑一下是否值得支持IE6（即 - 如果这是在观众精通技术的网站上，你可以完全放弃IE6支持，或者至少修复这个问题会使你的项目花费更多而不是你得到的回报;但如果你正在与医疗服务提供者打交道，你可能还需要处理IE6）。

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