Windows IEでoverflowを有効にする - IEだけにスタイルを適用させる

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

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

このときの動作がIEだけおかしいのでメモしておきます。

当サイトでは、XHTMLやNucleusの覚書を書いていますが、そのコードを記述するときはcode要素を使用し、CSSで以下のような装飾を加えています。

ただ、このままだと親要素の幅を越えたときに、越える直前の半角スペースで改行して表示されて見にくいです。ということで、以下のように修正。

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

pre要素を使うことで、改行したい位置で「<br />」と入力しなくても、ソース上も改行が反映されます。
ということで、code要素を使うときには必ずpre要素で囲うようにしました。
そして「スターハック」を使ってこんな感じに。

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

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

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

指定してもよさそうですが、調整がさらにややこしくなります。
この状態ではpre要素のwidthは親要素に依存します。その親要素から、上下左右のmarginを15pxに指定するだけで、本来は望み通りに表示されます。
親要素（dd.itemBody）のwidthは322pxなので、そこから内側に左右15pxのマージンを取ることになるので、pre要素のwidthは292pxに自動的になるはずなのです。
ところがpre要素に322pxと指定すると、とにかく幅を322pxにして親要素とのmarginを無視します。おまけにpaddingも取っているので、322pxよりも1文字分広くなります。

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