ネットスケープで見ると、ボックスからテキストがはみ出してます

ネットスケープ。Netscapeというブラウザのことです。

この問題はですね、例を見てもらったほうがはやいので、下の例を参考に。

横幅200px、縦幅100pxのボックスを定義したとします。
そして、その中に、テキストを書き込んでいって、かんたんなコメントにしようとしてたのですが、
思いのほか筆がすすみ、けっこうな量のテキストを書き込んでしまいました。
↓





今現在、IE6.0（インターネットエクスプローラー） で見てる方は、
上のボックスに、あんまり違和感を感じないでしょう。

でも、ネットスケープで、このボックスを表示させると、
枠線から、テキストがはみ出して表示されてると思います。

これはですね、縦幅を100pxと定義してますよね。
そんで、IEは、たとえ縦幅を指定してても、内容の大きさにあわせて、
自動で伸びていくので、ちゃんとボックス内におさまるんですが、
ネットスケープの場合だと、きっちり定義内容の値でしか、表示しません。

つまり、ボックスからテキストがはみ出して見える理由は、

定義した縦幅100pxという幅より、内容であるテキストの幅が大きくなってしまったから

IEで見てるかたも、上のボックスあきらかに100px以上に見えますよね？
だって、横幅200pxに定義してるのに、あきらかに縦幅はそれより広いですもんね。

このように、コメントなどを書くボックスに縦幅を定義すると、
ブラウザ間の落とし穴があるので、書きつづりたい時は、
縦幅を定義しておかなければボックスからテキストがはみ出したりしません。

こんなかんじに↓。

<<　段組して、ヨコのマージン定義したら妙に間隔が広がった

<< スタイルシート(CSS)講座 トップ