html - 为什么我的列表项元素符号与 float 元素重叠

Question

我有一个(XHTML Strict)页面，我在其中将图像 float 在常规文本段落旁边。一切顺利，除非使用列表而不是段落。列表的元素符号与 float 图像重叠。

更改列表或列表项的边距没有帮助。边距是从页面左侧开始计算的，但是 float 将列表项推向右侧 inside li 本身。因此，仅当我将边距设置得比图像宽时，边距才有用。

将列表 float 在图像旁边也可以，但我不知道列表什么时候在 float 旁边。我不想为了解决这个问题而 float 内容中的每个列表。此外，当图像向右而不是列表左侧 float 时，向左浮动会弄乱布局。

设置 li { list-style-position: inside } 确实将元素符号与内容一起移动，但它也会导致换行开始与元素符号对齐，而不是与行对齐以上。

问题显然是由于子弹在框外渲染， float 将框的内容向右推(而不是框本身)。这就是 IE 和 FF 处理这种情况的方式，据我所知，根据规范，这并没有错。问题是，我该如何预防？

Answer 1

我已经找到了解决这个问题的方法。应用 ul { overflow: hidden; 到 ul 确保框本身被 float 推到一边，而不是框的内容。

只有 IE6 需要 ul { zoom: 1; 在我们的条件注释中以确保 ul 具有布局。