ちゃだろぐ

computing

< 2012-05 >
  12345
6789101112
13141516171819
20212223242526
2728293031  
Powered by Nucleus CMS
Total1725155 7days2566 Yesterday368 Today310
Since 2004-07-11

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

Related