13

我有一块预先格式化的代码 (<pre>)，它水平溢出，所以有一个水平滚动条允许用户查看内容。

overflow: auto;

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

我已经尝试过此处列出的解决方案，但没有奏效。

唯一有效的解决方案是使用

overflow: scroll;

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

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

更新

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

4

4 回答 4

10

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

我查看了样式表并发现了这一点：

padding-bottom: 19px!ie7;

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

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

很抱歉问得太快了。

于 2009-01-13T16:18:23.777 回答
2

将 'padding-bottom:20px' 添加到 pre 标签

于 2009-01-13T18:02:08.293 回答
1

PRE用DIV一些额外的边距包裹你。

于 2009-01-13T16:09:48.850 回答
0

将您包裹PRE在 a 中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%;">也有效。

于 2009-01-13T16:25:15.947 回答