如何防止滚动条重叠内容?

mbi*_*ard 13 html css internet-explorer internet-explorer-7

我有一块预先格式化的代码(<pre>)水平溢出,因此有一个水平滚动条允许用户查看内容.

overflow: auto;
Run Code Online (Sandbox Code Playgroud)

但是,在IE7(可能是其他IE版本)中,滚动条与我内容的最后一行重叠(当只有一行内容时,这尤其令人恼火).

我已经尝试过这里列出的解决方案,但它没有用.

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

overflow: scroll;
Run Code Online (Sandbox Code Playgroud)

它为我所有预先格式化的部分添加了一个滚动条,这非常糟糕.

注意:它在Firefox 3和Google Chrome中运行良好.


更新

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

mbi*_*ard 10

在发布问题后,我考虑检查stackoverflow是否处理了(它做了).

我看了一下样式表,发现了这个:

padding-bottom: 19px!ie7;
Run Code Online (Sandbox Code Playgroud)

(好吧,他们使用20px,但19看起来更好).

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

很抱歉提问过得太快了.