Wie kann man verhindern, dass Bildlaufleisten den Inhalt überlappen?

Question

Ich habe einen Block mit vorformatiertem Code (<pre>), der horizontal überläuft, so dass eine horizontale Bildlaufleiste vorhanden ist, damit der Benutzer den Inhalt sehen kann.

overflow: auto;

Im IE7 (vielleicht auch in anderen IE-Versionen) überlappt die Bildlaufleiste jedoch die letzte Zeile meines Inhalts (was besonders ärgerlich ist, wenn es nur eine Zeile Inhalt gibt).

Ich habe die angegebene Lösung ausprobiert aquí aber es hat nicht funktioniert.

Die einzige Lösung, die funktioniert, ist die Verwendung von

overflow: scroll;

die allen vorformatierten Abschnitten eine Bildlaufleiste hinzufügt, was einfach furchtbar ist.

Hinweis: Es funktioniert gut in Firefox 3 und Google Chrome.

---

Update

Ich habe eine Lösung gefunden (siehe meine Antwort), aber wenn jemand einen Weg findet, das hässliche Padding nicht in jedem vorformatierten Abschnitt im IE7 zu haben, wäre das perfekt.

Answer 1

Nachdem ich die Frage gepostet hatte, dachte ich daran, zu überprüfen, ob Stackoverflow das behandelt (was es tut).

Ich habe einen Blick auf das Stylesheet geworfen und folgendes gefunden:

padding-bottom: 19px!ie7;

(gut, sie verwenden 20px, aber 19 sah besser aus).

Es fügt ein unteres Padding nur für den IE7 hinzu, was dazu führt, dass alle vorformatierten Abschnitte ohne Scrollbar wegen des großen Paddings etwas seltsam aussehen, aber zumindest kann ich den Inhalt sehen (und es sieht auch auf Stackoverflow seltsam aus).

Entschuldigen Sie, dass ich eine Frage zu schnell gestellt habe.

Answer 2

Padding-bottom:20px" zum pre-Tag hinzufügen

Answer 3

Wickeln Sie Ihr PRE in einem DIV mit einigen zusätzlichen Spielräumen.

Answer 4

Wickeln Sie Ihr PRE in einem DIV und wenden die overflow: scroll; zum DIV . Stellen Sie sicher, dass Sie entweder <div style="overflow: scroll; width='...'; height='...';"> oder weisen Sie dem div eine Klasse zu, um sicherzustellen, dass nicht alle eine Bildlaufleiste erhalten.

In meinem Blog verwende ich zum Beispiel <div style="overflow: scroll; width: 100%;"> für kleine Codestücke, damit die Benutzer horizontal scrollen können und das Div auf die richtige Höhe wächst. Bei längeren Beiträgen weise ich auch eine Höhe zu, um die Länge des gesamten Artikels zu verringern; dann können die Leute auch vertikal scrollen.

Sie können auch versuchen <div style="overflow: scroll; overflow-y: hidden; width: 100%;"> um nur eine horizontale Bildlaufleiste zu erhalten (und nicht beide und eine von ihnen ist deaktiviert). Vielleicht <div style="overflow-x: scroll; width: 100%;"> funktioniert auch.