Question

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

我得到了这个结果

vertical scrollbar in SyntaxHighlighter's block

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

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

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

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

Answer 1

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

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

Answer 2

我看了一下这个例子，发现里面还有一个垂直滚动。当我检查时"syntaxhighlighter javascript"本身有溢出。检查您是否在包含css之后或之前包含了代码

Answer 3

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;
}

Answer 4

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

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

希望这段代码片段对您有所帮助！：）

Answer 5

尝试删除水平滚动条，这是最终为我工作的，从上面的John Yin的帖子中获取灵感。下面没有任何子集本身就可以工作。

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

如何删除垂直滚动条SyntaxHighlighter块？

5 个答案: