代码之家  ›  专栏  ›  技术社区  ›  mbillard

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

  •  12
  • mbillard  · 技术社区  · 15 年前

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

    overflow: auto;
    

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

    我已经尝试了列出的解决方案 here 但是没有用。

    唯一有效的解决方案是

    overflow: scroll;
    

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

    注意:它在火狐3和谷歌Chrome中运行良好。


    更新

    我已经找到了一个解决方案(见我的答案),但是如果有人找到了一种方法来避免在IE7中的每个预格式化部分使用丑陋的填充,那就太完美了。

    4 回复  |  直到 15 年前
        1
  •  10
  •   mbillard    15 年前

    就在发布了这个问题之后,我考虑检查stackoverflow是否处理了这个问题(它处理了这个问题)。

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

    padding-bottom: 19px!ie7;
    

    (嗯,他们用的是20px,但19个看起来更好)。

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

    很抱歉问得太快。

        2
  •  2
  •   Matthew M. Osborn    15 年前

    在预标记中添加“padding bottom:20px”

        3
  •  1
  •   Diodeus - James MacFarlane    15 年前

    包装你的 PRE 在一个 DIV 还有一些额外的利润。

        4
  •  0
  •   Aaron Digulla    15 年前

    包装你的 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%;"> 也工作。