締切済み

IEでのみfloatが効かない？

2013/07/25 20:38

WEBサイトのレイアウトを、以下のように書いているのですが IE（ver.8～10）のみ思ったように表示されません。具体的には・・・ <div style="float:left; "> <span>ダミーテキストAAA</span> </div> <div style="float:left; "> <span>ダミーテキストAAA</span> </div> <div style="float:left; "> <span>ダミーテキストAAA</span> </div> ただdivを縦に並べたいだけなのですが、上のコードを例にすると三番目のdivが縦に並ばず二番目のdivの右横に来てしまいます。この現象はIEでだけで、他のブラウザ（safari、google chrome、Firefox）では正しく表示されます。解決方法をご存知の方がいらっしゃいましたら、ご教示願います。情報の過不足等ありましたらご指示ください。

question_xxx
お礼率0% (0/10)

HTML
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

みんなの回答

play_with_you
ベストアンサー率37% (112/301)

2013/07/26 10:40 回答No.4

縦に並べたいならfloatいらないじゃん（笑）タグやプロパティはちゃんと意味を把握して使いましょうね。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/07/26 10:00 回答No.3

試されたら分かるように、このままだと、どのブラウザでも横一列に並ぶはずですよ。　floatは、テキスト中の画像の周囲にテキストなどを回りこませるためのプロパティです。この様にブロックの配置に使うのは邪道です。　⇒9.5 浮動体（Floats）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats ) ＞ただdivを縦に並べたいだけなのですが、　なら、DIVは「文書構造上は意味を持たないブロック要素(7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 ))」ですから、ブロック要素は、『一般に、ブロックレベル要素は新しい行を開始し( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )』ますから、何も指定する必要はありません。　そもそも、HTMLの考え方が根本的に間違っています。基礎からきちんと学びなおされたほうが、はるかに早く失敗もありませんよ。・HTMLはデザインのためではありません。　文書をそれを構成する要素に分解して、それぞれがどのような要素であるかをタグを使ってマークアップするためのものです。　⇒2.4 HTML 4による文書の著述( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 ) ・DIVは意味がありませんから、「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」に使用します。　例えば、章立てでしたら <div class="section"> 　<h2>見出し</h2> 　<p>この章の記事</p> </div> <div class="section"> 　<h2>見出し</h2> 　<p>この章の記事</p> </div> <div class="section"> 　<h2>見出し</h2> 　<p>この章の記事</p> 　<div class="section"> 　　<h3>見出し</h3> 　　<p>この項の記事</p> 　</div> </div> 　と言う風に使います。!!、皆が理解してくれなかったので、HTML5では、 <section> 　<h2>見出し</h2> 　<p>この章の記事</p> </section> <section> 　<h2>見出し</h2> 　<p>この章の記事</p> </section> <section> 　<h2>見出し</h2> 　<p>この章の記事</p> 　<section> 　　<h2>見出し</h2> 　　<p>この項の記事</p> 　</section> </section> 　と書かなければならず、DIVは原則としてこの様な場合使えなくなります。 ★あなたのHTMLで、IEと他のブラウザでの誤差が出る原因は、DOCTYPEによるブロックの羽場の解釈の違いによるものです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> にすれば、IEも他のブラウザと同じになります。(たぶん) 　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) 　しかし、それは解決策ではありません。　根本的な誤りはfloatを使うべきではないという事です。