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

Question

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

) which overflows horizontally so there is an horizontal scrollbar to allow the user to view the content.</p>

<pre><code>overflow: auto;
</code>

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

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

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

overflow: scroll;

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

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

---

Обновление

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

Answer 1

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

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

padding-bottom: 19px!ie7;

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

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

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

Answer 2

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

Answer 3

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

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