如何防止滚动条重叠内容？ [英] How to prevent scrollbars from overlapping the content?

问题描述

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

 溢出：自动； 
  

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

我已经尝试了此处，但没有用。

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

 溢出： 
  

这会将滚动条添加到我所有预格式化的部分中，简直太糟糕了。

注意：它在Firefox 3和Google Chrome中正常运行。

---

更新

我已经找到了解决方案（请参见我的回答），但是如果有人找到了一种在IE7中每个预格式化的部分中都没有难看的填充的方法，

解决方案

就在发布问题之后，我才想到要检查stackoverflow是否处理了该问题。 / p>

我看了一下样式表，发现了这一点：

  padding -bottom：19px！ie7; 
  

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

它只为IE7添加了底部填充，这使得没有滚动条的每个预格式化部分由于其巨大的填充而显得有些怪异，但至少我可以看到内容（而且它在stackoverflow上确实很怪异

很抱歉提出问题的速度太快。

I have a block of preformatted code (<pre>) which overflows horizontally so there is an horizontal scrollbar to allow the user to view the content.

overflow: auto;

However, in IE7 (maybe other IE versions), the scrollbar overlaps the last line of my content (which is especially irritating when there is just one line of content).

I've tried the solution listed here, but it didn't work.

The only solution that works is to use

overflow: scroll;

which adds a scrollbar to all my preformatted sections which is just awful.

Note: It works fine in Firefox 3 and Google Chrome.

---

Update

I've found a solution (see my answer), but if someone finds a way to not have the ugly padding in every preformatted section in IE7, that would be perfect.

解决方案

Just after posting the question I thought about checking if stackoverflow handled that (which it does).

I took a look at the stylesheet and found this:

padding-bottom: 19px!ie7;

(well, they use 20px, but 19 looked better).

It adds a bottom padding only for IE7, which makes every preformatted sections without a scrollbar look a little weird because of the huge padding, but at least I can see the content (and it does look weird on stackoverflow too).

Sorry for asking a question too quickly.

这篇关于如何防止滚动条重叠内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！