Question

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

对IE兼容性有好处吗？我们应该一直遵循吗？

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

}

Answer 1

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

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

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

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

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

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

Answer 2

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

我们应该同时使用overflow：hidden和display：inline？

2 个答案: