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

Я новичок в веб-разработке и, возможно, задаю основной вопрос. Я установил Joomla 2.5 CMS на свой сайт, загрузил, установил и включил плагин SyntaxHighlighter. Затем включил синтаксис bash и больше не добавил следующий код на мою страницу

<pre class="brush: bash">$ uname -a
Linux laptop 2.6.32-41-generic #89-Ubuntu SMP Fri Apr 27 22:22:09 UTC 2012 i686 GNU/Linux
$</pre>

Я получил этот результат

Это нормально, но я понятия не имею, почему отображается вертикальная полоса прокрутки. Он прокручивается только для одного или двух пикселей. Итак, я попытался добавить следующий код в начало моего шаблона CSS file

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody {
  overflow-y: hidden;
}

Это мне не помогло, и я думаю, что проблема глубже. Есть ли у вас идеи о том, как удалить эту вертикальную полосу прокрутки?

Обновить Если я использую объявление !important в шаблоне CSS, панель прокрутки исчезает, но блок с выделенным кодом ведет себя очень странно при масштабировании страницы.

Ответы

Ответ 1

Вы можете добавить следующий стиль для удаления вертикальной полосы прокрутки и добавить горизонтальный только при необходимости:

<style type="text/css">
  .syntaxhighlighter { 
     overflow-y: hidden !important; 
     overflow-x: auto !important; 
  }
</style>

Ответ 2

Я посмотрел на этот пример и обнаружил, что в нем есть вертикальная прокрутка. Когда я проверил "syntaxhighlighter javascript", у меня было переполнение. Проверьте, включен ли код после или до того, как вы включили css

Ответ 3

syntaxhighlighter имеет стиль overflow: auto как стиль по умолчанию (см. следующий фрагмент css в shCoreDefault.css). Поэтому нам нужно установить overflow-y:hidden !important, когда нам не нравится вертикальная полоса прокрутки. Но нам больше не нужно устанавливать overflow-x: auto. Это уже есть.

.syntaxhighlighter {
    font-size: 1em !important;
    margin: 1em 0 !important;
    overflow: auto !important;
    position: relative !important;
    width: 100% !important;
}

Вы можете видеть, что syntaxhighlighter уже использовал "! important", поэтому вы бы обнаружили, что разные браузеры имеют другой результат. По моему опыту, в Firefox, я получил предполагаемый результат: вертикальная полоса прокрутки скрыта. Но в Chrome полоса прокрутки все еще там.

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

ContainerId .syntaxhighlighter {
    overflow-y: hidden !important;
}

Ответ 4

Чтобы удалить вертикальную полосу прокрутки для SyntaxHighlighter на вашем веб-сайте, вы можете использовать фрагмент кода ниже в разделе <head>...</head> вашей страницы.

<style type="text/css">
 .syntaxhighlighter table td.code .container {
  position: relative !important;
  padding-bottom: 5px !important;
}
</style>

Надеюсь, этот фрагмент кода поможет вам!:)

Ответ 5

Пытаясь удалить горизонтальную полосу прокрутки, это было тем, что в конечном итоге сработало для меня, взяв вдохновение из поста Джона Инь выше. Никакой подмножество ниже не работает сам по себе.

/* .post class is on high-level div */
.post .syntaxhighlighter {
    position: relative !important;
    width: 100% !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}