如何防止滚动条与内容重叠？答案

【问题标题】：How to prevent scrollbars from overlapping the content?如何防止滚动条与内容重叠？
【发布时间】：2010-10-01 04:08:48
【问题描述】：

我有一块预先格式化的代码（

）水平溢出，所以有一个水平滚动条允许用户查看内容。

overflow: auto;

但是，在 IE7（可能是其他 IE 版本）中，滚动条与我的内容的最后一行重叠（当只有一行内容时尤其烦人）。

我尝试了here 列出的解决方案，但没有成功。

唯一可行的解决方案是使用

overflow: scroll;

它为我所有预先格式化的部分添加了一个滚动条，这太糟糕了。

注意：它在 Firefox 3 和 Google Chrome 中运行良好。

更新

我找到了一个解决方案（请参阅我的答案），但如果有人找到一种方法，在 IE7 的每个预格式化部分中都没有丑陋的填充，那将是完美的。

【问题讨论】：

标签： html css internet-explorer internet-explorer-7

【解决方案1】：

在发布问题后，我想检查 stackoverflow 是否处理了该问题（确实如此）。

我查看了样式表，发现了这个：

padding-bottom: 19px!ie7;

（嗯，他们使用 20px，但 19 看起来更好）。

它只为 IE7 添加了底部填充，这使得每个没有滚动条的预格式化部分看起来有点奇怪，因为填充很大，但至少我可以看到内容（在 stackoverflow 上看起来也很奇怪）。

抱歉问得太快了。

【讨论】：

您可以将 padding-bottom 放在仅 IE 样式表中；此页面认为 '!ie7' 是一个 hack：css-tricks.com/how-to-create-an-ie-only-stylesheet

【解决方案2】：

在前置标签中添加 'padding-bottom:20px'

【讨论】：

这在每个浏览器中添加了丑陋的填充，我只需要修复 IE7。

【解决方案3】：

将您的PRE 包裹在DIV 中，并增加一些边距。

【讨论】：

【解决方案4】：

将PRE 包装在DIV 中，并将overflow: scroll; 应用于DIV。确保使用<div style="overflow: scroll; width='...'; height='...';"> 或为 div 分配一个类，以确保不是所有的 div 都有滚动条。

例如，在我的博客中，我将<div style="overflow: scroll; width: 100%;"> 用于小段代码，这样人们就可以水平滚动，并且 div 会增长到正确的高度。对于较长的部分，我还指定了一个高度，以减少整篇文章的长度；然后人们也可以垂直滚动。

您也可以尝试<div style="overflow: scroll; overflow-y: hidden; width: 100%;"> 只获得一个水平滚动条（而不是两者，其中一个被禁用）。也许<div style="overflow-x: scroll; width: 100%;"> 也可以。

【讨论】：

这将为我提到我不想要的每个 DIV 添加一个滚动条。
只需添加 style="overflow: scroll;"到 div，而不是在所有 DIV 的 CSS 样式表中指定它。