html - CSS：UL's/OL's vs. Div 在 IE 中向左浮动

Question

场景是客户想要一个浮动的 div（灰色框），其中包含环绕它的文本。然而，其中一些文本包括 ul 和 ol，它们隐藏在 IE6 中的浮动 div 后面。

我尝试将 ul's/ol's 包装在一个 div 中，看看是否有帮助，但没有成功。有没有人遇到过这个问题并找到了合适的解决方案？

（注意：这是一个旧站点，无法修改布局中的许多其他内容）

Answer 1

我认为您可以修改 li 以在内部而不是外部显示他们的子弹，这应该对您有所帮助...

ul {
   list-style-position: inside;
}

Answer 2

然而，其中一些文本包括 ul 和 ol，它们隐藏在 IE6 中的浮动 div 后面。

如果我们说的是这样简单的事情：

<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div>
<p>bar</p>
<ol style="border: dotted blue 1px;">
    <li>potato</li>
    <li>yoghurt</li>
</ol>

然后这里发生的事情发生在所有浏览器上，而不仅仅是 IE。您可以从本示例的边框中看到：列表的左侧填充发生在浮动后面，而不是将列表内容进一步向右推。这是因为浮动只排斥行框中的项目，而不排斥块元素。

如果您想要快速破解解决方法，请将 <ul> 包装在具有样式“显示：内联块”的 <div> 中。

Answer 3

Floating + IE6 总是会导致一些无心的痛苦和煎熬。一些简单的修复：

1. 为浮动框添加更多边距
2. 为您的 ul/ol 添加一些左边距