firefoxでdivタグの体裁崩れ

解決済

質問者：bakenshibakenshi
質問日時：2006/09/22 12:20
回答数：4件

お世話になります。

以下のソースを
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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： steel_gray
回答日時：2006/09/22 16:51

内容物が無い場合、高さの算出結果が0になるのが問題のようなので

height:1px;とか指定するのはどうでしょう？
（指定する場所は3重のdivのどれでもOK）

- 0
- 件

通報する

この回答へのお礼

steel_grayさん、ご教授有難う御座います。

>3重のdivのどれでもOK
これがヒントとなり、ここの問題ではなく、
実際に抱えてた問題を解決することが出来ました。

本当に有難う御座いました。

通報する

お礼日時：2006/09/22 21:41

No.3

回答者： nipox
回答日時：2006/09/22 16:18

余談ですみませんが、

「」
だと、スペースも表示されずに便利です。

- 0
- 件

通報する

この回答へのお礼

「」を入れてもFirefoxですとダメでした。

通報する

お礼日時：2006/09/22 16:58

No.2

回答者： Kuppycat
回答日時：2006/09/22 13:24

リスト２のlist2にあたる<div>が空要素（中味なし）なので、幅が取られず詰められるためです。

<div></div>　→　<div></div>

とすれば回避できますよ。

- 0
- 件

通報する

この回答へのお礼

Kuppycatさん、ご教授有難う御座います。
divタグに何かしらの値をwidthやご教授いただいた を入れれば
正しく表示されるのは知っていたのですが
何かしらを入れなくても表示させる方法はないものかと思っておりまして。
多分firefoxだとダメなんですね。。。
有難う御座いました。

通報する

お礼日時：2006/09/22 14:04

No.1

回答者： yambejp
回答日時：2006/09/22 13:22

firefox1.5でみるかぎり特に問題はないようですが

もし気になるようであればpaddingやmarginや
border-widthをすべて0pxにして、white-spaceを
nowrapにしてやればいけるかもしれません。

全体幅が300しかないのに100の幅のdivを３つ並べれば
なにかあれば確実に幅があふれちゃいますよね？
もう少し全体幅に余裕をもたせてみてはいかがですか？

- 0
- 件

通報する

この回答へのお礼

yambejpさん、ご教授有難う御座います。

>firefox1.5でみるかぎり特に問題はないようですが
わたしはWindows firefox1.5.07ですが、リスト２はつめられてしまいます。

>もし気になるようであればpaddingやmarginや
>border-widthをすべて0pxにして、white-spaceを
>nowrapにしてやればいけるかもしれません。
marginもしくはheight,width,NO2でお答えいただいた を入れれば
IEのように表示されました。
他の指定ではダメでした。

>全体幅が300しかないのに100の幅のdivを３つ並べれば
そうですね。気をつけます。

有難う御座いました。