Windows IEでoverflowを有効にする

当サイトはご覧の通り本文部分がほそーいので、親要素の領域を越える幅を持つ子要素ができてしまう場合があります*1。CSS には「overflow」というプロパティがあり、指定した要素が、その幅や高さの範囲を超えた場合に、どのように振る舞うかを指定します。値は

• visible：表示する
• hidden：隠す
• scroll：スクロールバーを表示する
• auto：自動（ブラウザが判断）
• inherit：親要素の値を継承

の5つがあります。このときの動作が、Safari や Firefox と、IE で違ったのでメモしておきます。

当サイトでは、XHTML や Nucleus の覚書を書いていますが、そのコードを記述するときは「<code>」で囲み「ここはコンピュータのソースコードなんかを書いてますよ」と明示しています。「<code>」はインライン要素なので、囲っただけでは見た目の変化は表れません。ということで、背景を変えて明らかにここは他とは違いますよ、とするために CSS でこのようにしてみました。

code {
display: block;
background: #0000ff;
color: #ffffff;
}

解説しますと「表示するときに BOX 要素の時と同じように振舞い、背景は青、文字色は白」という感じです。このままだと、親要素の幅を越える幅を持ったときに、越える直前の半角スペースで改行して表示されてしまい、ちょっと見た感じ汚いですし、コピーペーストする際に、表示されてるのと違う状態になったりします*2。ということで以下のように修正。

code {
display: block;
background: #0000ff;
color: #ffffff;
overflow: scroll;
}

これでめでたくスクロールバーが表示されて、僕が書いたまんまのソースコードが表示されるようになりましたが、IE では親要素を完全に無視し、どかーんとは右側にはみ出していました。ここで「width」を追加すればいいんだろうな、とは思ったのですが、ちょっといろいろ調べてみると「<pre>」を利用したほうが後々楽になりそうな予感がしたので、以下のように修正。

pre {
margin: 15px;
padding: 0.5em;
background: #0000b4;
overflow: scroll;
}

code {
color: #ffffff;
font-size: 10px;
}

pre 要素は「それで囲んでいるものは成形済みです」という指定ができます。どういうことかというと、通常の XHTML で改行しようと思えば、改行したい位置で「<br />」と入力しなければなりませんが「<pre>」で囲むとソース上で改行している位置で必ず改行してくれるということです*3。ということで、code 要素を使うときには必ず pre 要素で囲うようにしました。

そして「XHTML と CSS でのサイト構築メモ」でも書いた「スターハック」を利用して、現在はこのようになっていますこちらの対策をしています。
スターハックの代替手段

pre {
margin: 15px;
padding: 0.5em;
background: #0000b4;
overflow: auto;
}

code {
color: #ffffff;
font-size: 10px;
}

∗ html #main dl.itemBox dd.itemBody pre,
∗ html #main dl.itemBox dd.itemMore pre {
width: 322px;
margin: 15px;
padding: 0;
}

まず「overflow」の値を「auto」に変更しました。「scroll」だと、必要のない縦方向のスクロールバーも表示されて、右下も指定の背景色になるのでみっともないからです。もっともブラウザによっては「auto」でも表示されてしまう場合がありますが…

これだけで通常のブラウザは望み通りになりましたが、前述のとおり IE 用に「width」を指定して「padding」をクリアしています*4。「width」を指定しないと、いくら「overflow」を利用しても、親要素の幅を指定を無視しますね。この親不孝者は…

なぜ pre 要素に width を指定しないのか？

指定してもよさそうですが、調整がさらにややこしくなります。いま、pre 要素の width の値は指定されていません。親要素に依存しています。その親要素から、上下左右の margin を15px に指定するだけで、本来は問題ないのです。現在の親要素「dd.itemBody」の width は 322px なのですが、そこから左右 15px のマージンを取って、この要素「pre」の width は 292px に自動的になるはずなのです。しかもセンタリングされて。ところが 322px と指定すると、とにかく幅は 322px とられてしまい、親要素との margin を無視します。おまけに padding も取っているので、322px よりも 1 文字分広くなります。

では 292px とした場合ですが、この場合も幅は 292px で固定されて、padding 分だけ幅が広がり左寄せで表示されるため、右側と左側の余白が同じになりません。ということは…なんて事をするくらいなら、スターハックを利用して、親不孝者だけ強制してやればよいのです。ちなみに「overflow-x」「overflow-y」は IE の独自仕様です。なんともはや…

IE は他にも width 関連のバグがあって、ひどい場合は背景色がちらつく場合があります。対処方法はまた別の記事で。

1. *1 - ブラウザが適切な改行位置を見つけられない場合など。記号の羅列とかで起こったりします。
2. *2 - 画面上では改行されているのに、ペーストすると改行されない。
3. *3 - 確認したい方は、当サイトのソースコードを見てみてください。
4. *4 - Win IE は同一方向の width と padding を指定するとおかしくなります。