[CSS] overflow:auto で横スクロールバーがあるときに高さが足りなくなるのを防ぐ

引用だとかソースコードだとかの部分を枠で囲むために

<style type="text/css">
.box
{
width:400px;
border:1px black solid;
padding:8px;
overflow-x:auto;
overflow-y:hidden;
}
.box pre
{
margin:0px;
}
</style>

こんな CSS にしてるとします。
これで

<div class="box"><pre>．．．（省略）．．．</pre></div>

とか書けば、↓こんな感じに表示されます。

ところが、中身の部分が横に長いと↓みたいになっちゃいます。

ソースコードなんかの場合、中途半端に折り返すよりは横スクロールバーが出た方がいいかと思い、overflow-x:auto と overflow-y:hidden を使って 「縦スクロールバーは出さずに中身が収まる高さにする。横方向は収まらない場合は横スクロールを出す」 としてるわけですが、スクロールバー分だけ高さを広げるってことをしてくれないため 2行目がほとんど見えなくなっちゃってます。
IE7 ではこうなっちゃいました。
IE6 も確かこうなったような気がします。（ちゃんとは確認してないです）
Firefox はスクロールバーの高さ分だけ広がってくれるためこんなことにはなりません。
それ以外のブラウザは未確認ですが、どうやらこうなるのは IE だけみたいです。

これはあまりに見た目が悪いので何とかしたいところです。
で、以下のようにすれば一応対策できます。
検索しててどこかで見つけたんですが、どこで見つけたかは忘れちゃいました。

<style type="text/css">
.box
{
width:400px;
border:1px black solid;
padding:8px;
overflow-x:auto;
overflow-y:hidden;
}
.box pre
{
margin:0px;
}
</style>
<!--[if IE]>
<style type="text/css">
.box
{
    padding-bottom:1.2em;
}
</style>
<![endif]-->

前半部分は変わってません。
後半の <!-- [if IE]> から下の部分を追加しただけです。
この書き方のコメントを使うと IE の場合だけ内容が評価され、それ以外のブラウザの場合は単なるコメントとみなされます。
ですので、IE の場合だけ箱の下側が 1.2行分広くなるので↓のように 2行目が見えなくなっちゃうというのを防ぐことができます。

っていうか、これって横スクロールバーがあろうがなかろうが下側に 1.2行分の隙間を入れてるだけですけどね。
なので、横スクロールバーが無い時も 1.2行分広くなっちゃってます。
まぁ、隠れちゃう寄りはましってことでこういう風に対策するようにしました。