溢出：在 Chrome、IE 中自动添加滚动条

Posted 2023-03-06

【中文标题】溢出：在 Chrome、IE 中自动添加滚动条

【英文标题】：overflow:auto adding scrollbars in Chrome, IE

【发布时间】：2012-08-03 13:13:36

【问题描述】：

我曾经添加一个<div style='clear:both'></div> 来清除之前段中的浮点数，但有人建议我应该在<div> 上使用overflow:auto 和浮点数，因为它更简单、更干净。

问题是，我收到报告说我的网站中有一些奇怪的“阴影”。经过调查，事实证明它发生在 Chrome 中，而不是 Firefox 中，并且那些“阴影”实际上是非常小的滚动条。

我试图将这个 jsfiddle http://jsfiddle.net/57HM3/4/ 中的部分减少到最低限度。请注意，它们在最右边（在显示“结果”的位置）。它似乎与行高有关，如果我将其设置为 1.2 而不是 1.1，它就会消失。这是某种已知问题（我不知道）吗？

我知道还有其他方法可以清除它们，但它们涉及到 IE 特定的代码，而不是什么。我想保持原样，只是将带有浮动的 div 设置为 overflow:auto （如果这不起作用，我宁愿回去添加额外的 <div>

【参考方案1】：

添加 overflow:hidden 而不是。这将清除您的两者并且不会添加任何滚动

【讨论】：

但它会增长以容纳浮动（没有我指定高度）吗？既然我没有限制任何地方的高度，为什么overflow:auto 还要添加滚动条？

是的，它可以在小提琴中使用。我仍然不知道为什么overflow:auto 会添加它们，因为没有指定高度，这是一个错误吗？

div 的默认高度约为 20px。因此，如果 div 包含大于 20px 的高度，那么它将滚动。

【参考方案2】：

不要胡思乱想溢出。我会推荐一个“clearfix”解决方案。这是我使用的，我把它放在每个项目开始时所有样式表的顶部：

/* CLEAR-FIX */
.clearfix:after  
    visibility: hidden; display: block; font-size: 0; 
    content: " "; clear: both; height: 0; 

*:first-child+html .clearfix  zoom: 1;  /* IE7 */

...很久以前从博客上看到的，我不记得在哪里了。

任何需要与浮动一起增长的容器只需要添加“clearfix”类：

<div class="test" class="clearfix">
    <div style="float:left">Hello</div>
    <div style="float:left">World</div>
</div>

顺便说一句，如果你想知道 为什么 CSS 是这样的，浮动通常不计入父母身高的一部分，请参阅：Why do non-floating parents of floating elements collapse?

【参考方案3】：

如果您想为容器div 保留overflow:auto 规则，可以尝试从.test 类中删除line-height 规则。