<pre>要素が行の長さによってオーバーフローしてしまうと、Firefoxではボックスをはみ出て表示されるが、Internet Explorerではボックスが押し広げられてしまって、レイアウトが悲惨に壊れてしまう。とにかくめんどくさくて今まで放っていたのだけれど、さすがにまずいので直した。

とりあえず、CSSの中に、

pre {
	overflow: auto;
}

と定義した。Firefoxでは幅の広いコンテンツでは横スクロールが出現してくれてボックスをはみ出すことなく、具合がよい。しかし、Internet Explorerではボックスを内容に応じて広げてくれてしまう。いらぬおせっかいである。widthを定義するとよいとのことなので、

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

としたのだが、Internet Explorerでは具合がよくなったものの、Firefoxではpreボックスの幅が親要素と同じ幅になってしまってよろしくない。結局、

pre {
	overflow: auto;
	_width: 100%;
}

として、Internet Explorerにだけwidth属性を渡すこととなった。

しかし、属性の頭に_が付いていたらInternet Explorer専用だなんて、なんかに定義されているのか？まあ、ご都合主義ではあるが、表示は改善した。

Local search for: pre要素オーバーフロー対策