2008年3月16日日曜日

 

【CSS】<pre>のデザイン

pre要素へのスタイル指定
  1. ほとんどのブラウザでpreは等幅フォントで表示される
  2. ほとんどのブラウザでpreのwhite-spaceはpreになっている
  3. フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる
  4. overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る
  5. overflow: auto;ではあふれた方向にのみスクロール・バーが出る
  6. Internet Explorerではoverflow: auto;は内容があふれる場合にうまく解釈されないことがある
  7. heightを指定しなければ内容に合わせて適当に拡大してくれるので縦にはあふれない
  8. Internet Explorerでは内容に合わせてボックス幅が際限なく拡大するのでoverflowと同時にwidthの指定が必要になる
  9. Internet Explorerではボックス・モデルの解釈に問題があるのでwidthと同時にpaddingやborderを指定する場合はwidth: 90%;などと余裕を持たせる必要がある

以上を踏まえてアンダースコア・ハックを使わないコードが以下。リンク元から採用させて頂きました。


div#contents div.story pre {
  margin: 1.5em auto;
  padding: 1em;
  border: 1px solid #cfccc6;
  clear: both;
  width: 90%;
  overflow: scroll;
  color: #333333;
  background-color: #edeae4;
}

div#contents div.story > pre {
  overflow: auto;
}

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google