Как предотвратить наложение полос прокрутки на контент?
У меня есть блок предварительно отформатированного кода (<pre>), который переполняется по горизонтали, поэтому есть горизонтальная полоса прокрутки, позволяющая пользователю просматривать содержимое.
overflow: auto;
Однако в IE7 (возможно, в других версиях IE) полоса прокрутки перекрывает последнюю строку моего содержимого (что особенно раздражает, когда есть только одна строка содержимого).
Я пробовал решение, указанное в списке здесь, но оно не сработало.
Единственное решение, которое работает, - это использовать
overflow: scroll;
который добавляет полосу прокрутки ко всем моим предварительно отформатированным разделам, что просто ужасно.
Примечание. Он отлично работает в Firefox 3 и Google Chrome.
Обновлять
Я нашел решение (см. Мой ответ), но если кто-то найдет способ избежать уродливого заполнения в каждом предварительно отформатированном разделе в IE7, это было бы идеально.
Ответы 4
Оберните ваш PRE в DIV с некоторыми дополнительными полями.
Сразу после публикации вопроса я подумал о том, чтобы проверить, обработал ли stackoverflow это (что он делает).
Я взглянул на таблицу стилей и обнаружил следующее:
padding-bottom: 19px!ie7;
(ну, они используют 20 пикселей, но 19 выглядело лучше).
Он добавляет нижний отступ только для IE7, из-за чего все предварительно отформатированные разделы без полосы прокрутки выглядят немного странно из-за огромного заполнения, но, по крайней мере, я могу видеть содержимое (и это действительно выглядит странно в stackoverflow).
Извините, что задал вопрос слишком быстро.
Оберните ваш 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%;"> тоже работает.
Это добавит полосу прокрутки к каждому DIV, о котором я упоминал, что мне не нужно.
Просто добавьте style = "overflow: scroll;" в div вместо того, чтобы указывать его в таблице стилей CSS для всех DIV.
добавьте padding-bottom: 20px к тегу pre
Это добавляет уродливые отступы в каждом браузере, мне просто нужно исправить для IE7.
Вы можете разместить padding-bottom в таблице стилей только для IE; эта страница считает '! ie7' взломом: css-tricks.com/how-to-create-an-ie-only-stylesheet