Nucleusアイテム投稿時にサンプルとして何らかのソースコードを表示させるために<pre>タグを単純に利用してました。

いろいろ問題があって、最終的には以下の感じでOKということにしています。 


HTMソースコード例

<div class='source'>
<pre>
<code>
表示させたいソース
</code>
</pre>
</div>



CSSソースコード例

pre
{
    font-size: 11px;
    margin: 0px 0px 20px 0px;
    padding: 20px 10px 10px 10px;
}

.source
{
    margin: 0px;
    padding: 0px 0px 0px 0px;
    text-align:left;
    width: 440px;
    overflow: auto;
    overflow-y: hidden;
    border: 1px solid #999999;
    background-color: #f0f0f0;
}

最初は単純に 


pre
{
    overflow: auto;
}

とやってました。 が、以下の問題がありました。

  • widthを指定しないとIEでうまく表示できない。
  • MacIEではwidth指定を行うと表示できない。
  • overflow-y: hidden;指定がないとIE6では必ず縦スクロールバーが表示される

回避策として

  • preにはwidth指定を行わずdivに記述して囲む
  • overflow-y: hidden;指定で明示的に縦スクロールバーを消す
  • height指定は行わない

といった感じにすることで横スクロールバーのみ自動表示になります。
当サイトではこの方法でソース表示しています。