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 のブロックの垂直スクロールバー

問題ありませんが、強調表示された垂直スクロールバーが表示される理由がわかりません。1 ～ 2 ピクセルだけスクロールします。だから、私が試したのは、テンプレートの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

水平スクロールバーを削除しようとして、これが最終的にうまくいったもので、上記の 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;
}
于 2015-10-24T19:45:57.140 に答える