こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

投稿日時 - 2008-06-14 22:41:32

QNo.4101059

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

投稿日時 - 2008-06-15 13:46:32

お礼

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

投稿日時 - 2008-06-17 13:29:32

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

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

投稿日時 - 2008-06-16 10:59:23

補足

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

投稿日時 - 2008-06-17 08:47:03

ANo.1

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

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

投稿日時 - 2008-06-15 06:20:48

補足

なるほど、勉強になります。
---------------------------------------------------
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>
---------------------------------------------------
このような感じになっております。

投稿日時 - 2008-06-15 11:21:43

あなたにオススメの質問