如何删除垂直滚动条SyntaxHighlighter块？ [英] How to remove the vertical scrollbar SyntaxHighlighter block?

问题描述

我是Web开发的新手，可能有一个主要问题。
我在我的网站上安装了Joomla 2.5 CMS，已下载，安装并打开了 SyntaxHighlighter 插件。然后启用 bash 语法，并且不再向我的页面添加以下代码

I am newbie in Web-developing and possibly has a primary question. I have installed Joomla 2.5 CMS on my site, downloaded, installed and turned on the SyntaxHighlighter plugin. Then enabled the bash syntax and added nothing more the following code to my page

<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 文件的开头添加以下代码

It is OK but I have no idea why the highlighted vertical scrollbar appears. It scrolls only for a one or two pixels. So, what I have tried is to add a following code to the beginning of my template's CSS file

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

这对我没有帮助，我认为问题更深。

It does not helped me and I think the problem is deeper. Do you have any ideas about how to remove this vertical scrollbar?

更新如果我使用！important 在模板的 CSS 中的code>声明消失，但是突出显示的代码块在页面缩放时表现得很奇怪。

Update If I use the !important declaration in template's CSS the scrollbar dissappear but the block with highlighted code behaves very strange on page scaling.

推荐答案

您可以添加以下样式来删除垂直滚动条，并在需要时添加水平滚动条：

You can add the following style to remove the vertical scroll bar and add horizontal one only when needed:

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

这篇关于如何删除垂直滚动条SyntaxHighlighter块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！