Blog Top

スポンサーサイト

  • このエントリーをはてなブックマークに追加
  • Yahoo!ブックマークに登録
  • Googleブックマークに追加
  • Buzzurlにブックマーク
  • この記事をクリップ!
  • イザ!ブックマーク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

preにoverflow:autoを指定するとIEでずれる

  • このエントリーをはてなブックマークに追加
  • Yahoo!ブックマークに登録
  • Googleブックマークに追加
  • Buzzurlにブックマーク
  • この記事をクリップ!
  • イザ!ブックマーク

以下の様にpreタグにwidthとoverflow:autoを指定すると、何故かIE6,7ではコンテンツがずれて表示される。


pre {
     overflow:auto;
     width:100px;
}

<pre>サンプルサンプルサンプル</pre>

具体的には、下にスクロールバーが表示されるだけで、コンテンツが全く見えない状態になる。

調べた所、どうやらこのような表示になるのは、コンテンツがwidth以上の長さになった時だけらしい。指定したwidth内でコンテンツが収まるのであれば、正常に表示される。(当たり前か)

つまりIEさんだけoverflow:autoがうまく働いてくれていない…

IEでもずれない様に表示させるにはpreタグにheightを指定するか、overflowの値をautoからscrollに変更する。このいずれかを指定することで、IEでもコンテンツが表示されるようになる。


pre {
     overflow:scroll;
     width:100px;
}

<pre>サンプルサンプルサンプル</pre>

久しぶりにIEでハマった…。

関連記事

トラックバック

http://blogmemoblog.blog.fc2.com/tb.php/10-6cd92607

コメントの投稿

管理者にだけ表示を許可する

検索フォーム


RSSリンクの表示

QRコード

QR

問い合わせ

当ブログ管理人への問い合わせはこちらのフォームからお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。