可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

I got this result

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?

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.

回答1:

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>

回答2:

I looked at the example and found that there is a vertical scroll in that as well. When I inspected "syntaxhighlighter javascript" itself had an overflow. Check if you have included the code after or before you included the css

回答3:

syntaxhighlighter has overflow: auto as default style (see following css snippet in shCoreDefault.css). That's why we have to set overflow-y:hidden !important when we don't like vertical scrollbar. But we don't need set overflow-x: auto anymore. It's already there.

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

You can see syntaxhighlighter has already used '!important', that's why, you would find different browsers has different result. On my experience, in Firefox, I got the intended result: vertical scrollbar being hidden. But in Chrome, scrollbar is still over there.

In order have a higher priority of my defined class, I prefix some other scope selector, like the container's id or class.

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

回答4:

To remove your vertical scrollbar for SyntaxHighlighter in your website you can use the below code snippet in your <head>...</head> section of your page.

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

Hope this code snippet helps you! :)

回答5:

Trying to remove a horizontal scroll bar, this was what finally worked for me, taking inspiration from John Yin's post above. No sub-set of the below worked in-and-of itself.

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