我有一个(XHTML Strict)页面,在该页面上我将图像与普通文本段落一起浮动。一切顺利,除非使用列表而不是段落。列表的项目符号与浮动图像重叠。
更改列表或列表项的边距无济于事。页边距是从页面的左侧开始计算的,但浮动框将列表项推到其 内部 的右侧li。因此,仅当我将其设置得比图像宽时,边距才有用。
li
浮动图像旁边的列表也可以,但是我不知道列表何时浮动。我不想为了解决此问题而浮动内容中的每个列表。此外,当图像浮动 到 列表 的右侧 而不是列表的左侧时,向左浮动会弄乱布局。
设置li { list-style-position: inside }的确会使项目符号与内容一起移动,但是也会使换行的内容开始与项目符号对齐,而不是与上方的行对齐。
li { list-style-position: inside }
显然,问题是由子弹在盒子外面渲染引起的,浮动框将盒子的内容推向右侧(而不是盒子本身)。IE和FF就是这样处理情况的,据我所知,按照规范,这没有错。问题是,如何预防呢?
我找到了解决此问题的方法。施加ul { overflow: hidden; }到ul该盒子本身是由浮子推开保证,而不是框的内容。
ul { overflow: hidden; }
ul
只有IE6才需要ul { zoom: 1; }在我们的条件注释中确保ul布局。
ul { zoom: 1; }