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

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

overflow: auto;

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

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

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

overflow: scroll;

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

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

Обновление

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

Ответы

Ответ 1

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

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

padding-bottom: 19px!ie7;

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

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

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

Ответ 2

добавить 'padding-bottom: 20px' в предварительный тег

Ответ 3

Оберните PRE в DIV с дополнительными полями.

Ответ 4

Оберните 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%;"> тоже работает.