Как предотвратить перекрытие содержимого полосами прокрутки?

у меня есть блок предварительно отформатированного кода (

), который переполняется по горизонтали, поэтому есть горизонтальная полоса прокрутки, позволяющая пользователю просматривать содержимое.

overflow: auto;

однако в IE7 (возможно, в других версиях IE) полоса прокрутки перекрывает последнюю строку моего контента (что особенно раздражает, когда есть только одна строка контента).

Я пробовал решение, указанное здесь, но это не сработало.

единственное решение, которое работает для использовать

overflow: scroll;

который добавляет полосу прокрутки ко всем моим предварительно отформатированным разделам, что просто ужасно.

Примечание: он отлично работает в Firefox 3 и Google Chrome.


обновление

Я нашел решение (см. Мой ответ), но если кто-то найдет способ не иметь уродливого заполнения в каждом предварительно отформатированном разделе в IE7, это было бы идеально.

4 ответов


сразу после публикации вопроса я подумал о проверке, обработал ли stackoverflow это (что он и делает).

Я взглянул на таблицу и нашел это:

padding-bottom: 19px!ie7;

(ну, они используют 20px, но 19 выглядели лучше).

Он добавляет нижнее заполнение только для IE7, что делает каждый предварительно отформатированный раздел без полосы прокрутки немного странным из-за огромного заполнения, но, по крайней мере, я могу видеть содержимое (и это выглядит странно на stackoverflow слишком.)

Извините, что задал вопрос слишком быстро.


добавить "padding-bottom:20px" в тег pre


обернуть PRE на DIV С некоторыми дополнительными полями.


обернуть 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%;"> чтобы получить только горизонтальную полосу прокрутки (а не оба, и один из них отключен). Может быть!--7--> тоже работает.