CLB with HTML::Parser バージョンアップ
CLB with HTML::Parserのバージョンアップをした。
CLB with HTML::Parser ver. 0.02 [ダウンロード]
MacのIEで、preタグにoverflow:autoをつけると中身が消えるというバグがあるので、それを回避するために、preタグをdivで囲みました。
<div class="code"><pre>〜</pre></div>
と自動的に変換されます。
これで、スタイルシートを
.blogbody .code pre{
font-family:monospace;
font-size:8pt;
color: #666666;
margin:3px;
padding:0px;
}
.blogbody .code{
background: #eeeeee;
margin:0px 2px 10px 2px;
overflow: auto;
width:auto;
}
とすればよいと思ったのだが、これだと、MacOS XのIEでどうも、画面が崩れれる。
なのでここでみつけた、@mediaで囲んでしまう方法を利用。
あと、overflow:autoだと、WindowsのIEでも縦スクロールがでることで、表示が汚くなるので、
line-break:strict; word-break:break-all; word-wrap:break-word;
をいれて、事実上、overflowを使わないようにした。
最終的には、
.blogbody .code pre{
font-family:monospace;
font-size:8pt;
color: #666666;
line-break:strict;
word-break:break-all;
word-wrap:break-word;
margin:3px;
padding:0px;
}
.blogbody .code{
background: #eeeeee;
margin:0px 2px 10px 2px;
overflow: hidden;
width:95%;
}
@media screen {
.blogbody .code{
overflow: auto;
width:auto;
}
}
こんな感じで使用中