13

我是 Web 开发的新手，可能有一个主要问题。我已经在我的网站上安装了 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>

我得到了这个结果

SyntaxHighlighter 块中的垂直滚动条

没关系，但我不知道为什么会出现突出显示的垂直滚动条。它只滚动一个或两个像素。因此，我尝试将以下代码添加到模板CSS文件的开头

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

它没有帮助我，我认为问题更深。您对如何删除此垂直滚动条有任何想法吗？

更新如果我!important在模板中使用声明，CSS滚动条就会消失，但是带有突出显示代码的块在页面缩放时表现得非常奇怪。

4

5 回答 5

27

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

<style type="text/css">
  .syntaxhighlighter { 
     overflow-y: hidden !important; 
     overflow-x: auto !important; 
  }
</style>
于 2012-11-08T19:21:00.413 回答
0

syntaxhighlighter 具有overflow: auto默认样式（请参阅 shCoreDefault.css 中的以下 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 中，滚动条仍然存在。

为了使我定义的类具有更高的优先级，我在其他一些范围选择器前面加上前缀，例如容器的 id 或类。

ContainerId .syntaxhighlighter {
    overflow-y: hidden !important;
}
于 2014-02-01T04:01:00.930 回答
0

我查看了示例，发现其中也有一个垂直滚动。当我检查 "syntaxhighlighter javascript"自己有一个溢出。检查您是否在包含 css 之后或之前包含了代码

于 2012-08-25T19:43:03.777 回答
0

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;
}
于 2015-10-24T19:45:57.140 回答
0

要在您的网站中删除 SyntaxHighlighter 的垂直滚动条，您可以在<head>...</head>页面的部分中使用以下代码段。

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

希望这段代码对您有所帮助！:)

于 2015-08-13T14:24:17.273 回答