All
pre要素オーバーフロー対策
<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専用だなんて、なんかに定義されているのか?まあ、ご都合主義ではあるが、表示は改善した。
2005-10-05_22:53-tyada










