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

时间:2009-01-13 16:04:02

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

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

overflow: auto;

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

我已尝试列出here列出的解决方案,但它无效。

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

overflow: scroll;

为我所有预先格式化的部分添加了滚动条,这很糟糕。

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


更新

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

4 个答案:

答案 0 :(得分:10)

在发布问题后,我考虑检查stackoverflow是否处理了(它确实如此)。

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

padding-bottom: 19px!ie7;

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

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

很抱歉提问过得太快。

答案 1 :(得分:2)

将'padding-bottom:20px'添加到预标记

答案 2 :(得分:1)

PRE包裹在DIV中,并附加一些额外的边距。

答案 3 :(得分:0)

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

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

您还可以尝试<div style="overflow: scroll; overflow-y: hidden; width: 100%;">只获取一个水平滚动条(而不是两个,其中一个被禁用)。也许<div style="overflow-x: scroll; width: 100%;">也有效。