Wordpress Syntaxhighlighter -- 水平滚动条可见性答案

【问题标题】：Wordpress Syntaxhighlighter -- horizontal scroll bar visibilityWordpress Syntaxhighlighter -- 水平滚动条可见性
【发布时间】：2014-04-08 21:01:33
【问题描述】：

我将以下代码与带有可选语言包的 wp-syntaxhighlighter 插件一起使用（例如，lisp）。我希望水平滚动条始终可见，而不是仅在代码块的末尾。请问，如何实现？

<div style="overflow:auto;max-height:400px;width:600px">
  <pre class="brush: lisp; gutter: true">
  CODE GOES HERE
  </pre>
</div>

_{（来源：lawlist.com）}

编辑：这是以下代码的屏幕截图：<div style="overflow:auto;max-height:400px;width:600px;overflow-x:scroll;">。添加overflow-x:scroll; 会导致出现第二个水平滚动条，但没有蓝色滑块。

_{（来源：lawlist.com）}

【问题讨论】：

你试过overflow-x:scroll;吗？
@ilias -- 感谢您的建议。我刚刚尝试添加overflow-x:scroll;（即<div style="overflow:auto;max-height:400px;width:600px;overflow-x:scroll;">）——它创建了第二个没有蓝色滑块的水平滚动条——当代码块位于末尾时，原始滚动条仍然存在。我将添加结果的第三个屏幕截图。
我明白了，你可以试试style="max-height:400px;width:600px;overflow-x:scroll; overflow-y:scroll;" 吗？
嗯，它似乎确实与插件相关，您可能会从How to remove the vertical scrollbar SyntaxHighlighter block? 或here 或这些results 中获得一些想法。我现在无法对其进行测试以帮助您获得更多帮助。
溢出：自动；如果内容大于定义的高度或宽度，将自动添加滚动条。这就是为什么 2 滚动条。所以是溢出：x 或溢出：自动

标签： html wordpress syntaxhighlighter

【解决方案1】：

根据@ilias 提供的有用链接以及@Arjun Chaudhary 的有用评论，以下代码解决了该问题：

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

<pre class="brush: lisp">

INSERT-CODE-SNIPPET-HERE

</pre>

或，修改syntaxhighlighter 的shCore.css（又名wp-syntaxhighlighter）：

.syntaxhighlighter {
  width: 500px;
  height: 500px;
  overflow-y: auto !important;
  overflow-x: auto !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  font-size: 1em !important;
}

_{（来源：lawlist.com）}

【讨论】：