我们应该同时使用溢出：隐藏和显示：内联吗？答案

【问题标题】：Should we use both overflow: hidden and display:inline?我们应该同时使用溢出：隐藏和显示：内联吗？
【发布时间】：2011-02-25 09:43:07
【问题描述】：

对于浮动元素，当我们使用overflow:hidden 清除浮动时，我们是否应该始终定义display:inline 和overflow:hidden？

对IE兼容有好处吗？我们应该一直跟随吗？

#secondary-col {
float:left;
overflow:hidden;
display:inline;

}

【问题讨论】：

标签： css xhtml cross-browser

【解决方案1】：

我通常将display:inline; 设置为浮动元素，尤其是 li 用于水平导航。旧版本的 IE 往往会在其他方面做一些奇怪的事情。就溢出而言，如果您没有任何可以应用clear 的相邻元素，通常在父容器上使用它来清除浮动。您是否也应该将overflow:hidden 应用于子元素？我现在不记得了，但是当子元素太大时，它可能有助于旧版本的 IE 扩展其父容器的边框。（正确的行为表明它们应该从容器中溢出。）无论哪种方式，IE 总是需要一些调整才能正确。 :)

【讨论】：

【解决方案2】：

display: inline 是针对 IE6 的修复，以防止双倍边距错误。如果您曾经漂浮过某些东西，那么最好将其包含在内。如果你有一个特定于 IE 的样式表，那么最好将它保留在那里（否则它是一个无用的属性）。

overflow: hidden 是一种用于强制包含浮动元素的元素占据内容的全部高度的技术。示例：

<div class="wrapper">
    <div class="floater">floating element</div>
</div>

这里，包装器的高度为 0，因为它只包含浮动元素。要解决这个问题，您可以向包装器添加两个属性之一：overflow: hidden 或 float: left。

两者都会强制包装器具有正确的高度，但是浮动的显然也会浮动元素，这可能是您不想要的。如果包装器具有固定高度，则不要使用溢出，因为文本可能会被隐藏。

所以基本上，如果您已经拥有float: left，则不需要overflow: hidden。但是你可以为 IE6 保留display: inline。

【讨论】：