CSS)overflow,スクロールについて

質問

独学でホームページをツクッテいる者です。
overflow:scroll;をするとIE以外でうまく表示できません。
Firefoxなどでは、BOXの中の文字がスクロールバーごとBOXの外(右側)に大きくずれてしまいます。
IEですと、きちんとBOXの中に文字も収まり、スクロールバーも表示されます。
ためしにoverflow:scroll;をCSSから消して更新すると、文字はBOXの中に収まります。
FirefoxでもBox内がずれずにスクロールされる方法はないでしょうか？

回答No.2

grumpy_the_dwarf · ベストアンサー

この手の話の鉄則として、「IEなら思ったとおりになるのに」と感
じたら、規格の理解を間違っている証拠なんですよ。なにしろIEは
判りにくい勘違いしやすい部分をことごとく勘違いして作ってます
からね。

スクロールバーは、パディングとボーダーの間に挿入されるべきも
のです。#mainのwidthが410pxで#naiyouのwidthも410pxでは、スク
ロールバーを挿入する余裕がないので、表示が崩れてあたりまえで
す。IEはwidthの中にパディングやボーダーを取るという大きなバ
グがあるので、スクロールバーの分の幅を取り忘れても平気だった
んです。
スクロールバーを出す可能性があるボックスは、最初からその分の
余裕を見てサイズを決定して下さい。

お礼

IEとFirefoxの違いを勉強しました。
原因は違う箇所にあったのですが、パディングのバグが原因でした。
今回は勉強になりました。

回答No.3

noname#66720

ソースを見る限り問題はないようですが・・・
もしかしたら別の指定への影響が出てるのかもしれませんね。

補足

そうですか…
色々ありがとうございます。

回答No.1

noname#66720

とりあえずソースを見せてください。

webページの作成はIEで作ってFirefox等にあわせるよりも、ただIEのバグを回避して作るほうが楽なので、なぜFirefoxでそのような表示になるのかを考えたほうが解決が早いですよ。

補足

なるほど、勉強になります。
---------------------------------------------------
CSS//
#right{
background-image:url(images/waku.png);
behavior:url(iepngfix/iepngfix.htc);
width:450px;
height:420px;
float:left;
}

#main{
margin:20px;
width:410px;
height:380px;
}

#theme{
width:410px;
height:80px;
}

#naiyou{
width:410px;
height:299px;
border-top:1px dotted #999999;
overflow:scroll;
background-image:url(iepngfix/blank.gif);
behavior:url(iepngfix/iepngfix.htc);

}
---------------------------------------------------
HTML//
<div id="right">
<div id="main">
<div id="theme"></div>
<div id="naiyou">長文が入る</div>
</div>
</div>
---------------------------------------------------
このような感じになっております。