- ベストアンサー
firefoxでdivタグの体裁崩れ
お世話になります。 以下のソースを IEで見るとリスト１、リスト２は同じ内容が表示されます FireFoxで見るとリスト２のlist3が左側につめられて表示されます。 ・これはIE or FireFoxのバグになるのでしょうか？ ・IEと同じようにFireFoxで表示したいのですが出来ますでしょうか？ 申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>DIVタグテスト</title> <body> DIVタグテスト<br> <br> リスト１ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list2</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> <br> <br> リスト２ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div></div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> </body> </html>
- bakenshibakenshi
- お礼率81% (115/141)
- HTML
- 回答数4
- ありがとう数7
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
内容物が無い場合、高さの算出結果が0になるのが問題のようなので height:1px;とか指定するのはどうでしょう？ （指定する場所は3重のdivのどれでもOK）
その他の回答 (3)
- nipox
- ベストアンサー率32% (10/31)
余談ですみませんが、 「­」 だと、スペースも表示されずに便利です。
お礼
「­」を入れてもFirefoxですとダメでした。
- Kuppycat
- ベストアンサー率50% (109/216)
リスト２のlist2にあたる<div>が空要素（中味なし）なので、幅が取られず詰められるためです。 <div></div> → <div> </div> とすれば回避できますよ。
お礼
Kuppycatさん、ご教授有難う御座います。 divタグに何かしらの値をwidthやご教授いただいた を入れれば 正しく表示されるのは知っていたのですが 何かしらを入れなくても表示させる方法はないものかと思っておりまして。 多分firefoxだとダメなんですね。。。 有難う御座いました。
- yambejp
- ベストアンサー率51% (3827/7415)
firefox1.5でみるかぎり特に問題はないようですが もし気になるようであればpaddingやmarginや border-widthをすべて0pxにして、white-spaceを nowrapにしてやればいけるかもしれません。 全体幅が300しかないのに100の幅のdivを３つ並べれば なにかあれば確実に幅があふれちゃいますよね？ もう少し全体幅に余裕をもたせてみてはいかがですか？
お礼
yambejpさん、ご教授有難う御座います。 >firefox1.5でみるかぎり特に問題はないようですが わたしはWindows firefox1.5.07ですが、リスト２はつめられてしまいます。 >もし気になるようであればpaddingやmarginや >border-widthをすべて0pxにして、white-spaceを >nowrapにしてやればいけるかもしれません。 marginもしくはheight,width,NO2でお答えいただいた を入れれば IEのように表示されました。 他の指定ではダメでした。 >全体幅が300しかないのに100の幅のdivを３つ並べれば そうですね。気をつけます。 有難う御座いました。
お礼
steel_grayさん、ご教授有難う御座います。 >3重のdivのどれでもOK これがヒントとなり、ここの問題ではなく、 実際に抱えてた問題を解決することが出来ました。 本当に有難う御座いました。