pre要素とoverflow属性に纏わる苦悩

2021.4.1 移転しました...

• このページの旧URLは
  • http://www10.plala.or.jp/palm84/css_memo_pre_overflow.html

このページでは meta 要素で最新IEを指定しています。IE7指定ページは下記にて。

• pre要素とoverflow属性に纏わる苦悩【IE7版】

※ IE以外のブラウザでは指定は無視されるので表示は（h1 以外は）変わりません。

overflow属性

要素がはみ出してしまう場合にどうするかという属性でありんす。pre要素については overflow: auto を指定するのが一般的であったりするかもしれないという気がしないでもないというお話。

FirefoxやOperaではほとんど問題ないけど、IEは気絶するほど悩ましい...（おおげさ！）

margin: 0%;
padding: 0;
background-color: #f1f1f1;
font-size: 100%;
letter-spacing: 0;
overflow: auto;
line-height: 100%;
width: 100%;
border-style :none;
border-width : 0px;

親要素の div.box には padding:1em; width: 30%; を指定してあります。

あいうえお
かきくけこ

Firefox + VL Pゴシック などでは縦スクロールバーが出てしまうことがあります。line-height を130%以上などに調整するか、或いは無指定の方が安全かもしれません。あっと上下 padding の調整の方がいいかな？

• VL Pゴシック

あいうえお
かきくけこ

• IPA モナー Pゴシック

あいうえお
かきくけこ

• ＭＳ ゴシック - line-height:130%

あいうえお
かきくけこ

• VL Pゴシック - line-height:130%

あいうえお
かきくけこ

• IPA モナー Pゴシック - line-height:130%

あいうえお
かきくけこ

overflowの確認

♪ クマがただそこにいればいい〜クマがただそこにいればいい〜
♪ I want kumar to stay by me
♪ クマがただそこにいればいい〜クマがただそこにいればいい〜

♪ クマがただそこにいればいい〜クマがただそこにいればいい〜

IE6,IE7ではおかしいですよね。スクロールバーの分が、幅・高さから引かれるようです。

【追記】

IE8の「標準」表示では高さからは引かれない様ですね。IE8の互換表示、及びIE6,IE7だと高さも引かれて1行のテキストが見えなくなるかと。

IEのpre要素デフォルト設定

もちろん他のブラウザで再現できませんが...こんなかんじかと。

margin: 0 0 18px 0;
padding: 0;
font-size: 80%;
font-family: 'ＭＳ ゴシック',monospace;
line-height: 120%;
letter-spacing: 0;
width: 100%;
border-style : none;
border-width : 0px;

paddingを上下指定してみませう。

padding: 1em 0 1em 0;

♪ クマがただそこにいればいい〜クマがただそこにいればいい〜
♪ I want kumar to stay by me
♪ クマがただそこにいればいい〜クマがただそこにいればいい〜

♪ クマがただそこにいればいい〜クマがただそこにいればいい〜

IEでもマシになったかと。縦スクロールバーは邪魔なんですけどね（IE8の標準モードでは出ないかな？）。

ただ、1行preの場合高さがちょっとなぁとは思ってしまいますが...

♪ クマしかいない

備考

IE8 について少し追記。

IE7指定ページを追加。

最終更新日：2010.3.30

ちなみにここのpre設定はこんなかんじです。

margin: 3%;
padding: 1em 0.5em;
background-color: #f1f1f1;
font-size: 95%;
overflow: auto;
border: 1px #ccc inset;
line-height: 110%;
width: 90%;

border を指定する際には width に注意（若干小さめにする）。 width を指定しないとIEでバグが出やすいです。

• ←
• H
• ↑
• ↓