ベストアンサー

legendの見え方？

2008/05/22 23:44

フォームを作っているのですがfirefoxで見るとlegendの width指定が全く効きません・・・ ie6で見ると意図したように表示されます！ display:block;などいろいろ試してみたのですがなにも変わらずでした。 firefoxでも意図したように見えるためにはどうすればいいのでしょうか？宜しくお願いします。 ---html--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="../css/form.css" type="text/css" /> <title>title</title> </head> <body> <div> <form name="form1" method="post"> <fieldset> <legend>情報1</legend> <label for="name">氏名<span class="check">※</span></label> <input type="text" name="NAME" class="w180" /><br /> <label for="address">住所<span class="check">※</span></label> <input name="ADDRESS" type="text" class="w180" /><br /> </fieldset> <fieldset> <legend>情報2</legend> <label for="tel">電話番号<span class="check">※</span></label> <input name="TEL" type="text" class="w180" /><br /> <label for="fax">FAX番号</label> <input name="FAX" type="text" class="w180" /><br /> </fieldset> <p align="center"><input type="submit" value="送信" /></p> </form> </div> </body> </html> ---css--- fieldset { display: block; width: 500px; margin: 0 auto 0.5em auto; padding: 5px; text-align: center; border: solid 1px #278ed1; font-family: verdana, sans-serif; line-height: 1.5em; } legend { display: block; width: 180px; height: 31px; margin-bottom: 5px; padding: 7px 0 3px 7px; background: #fff url(../images/form/legend_bg.gif) no-repeat; font-size: 1.1em; font-weight: bold; color: #fff; text-align: left; }

noname#65793

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

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

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

ベストアンサー

tsucu
ベストアンサー率62% (71/113)

2008/05/23 01:02 回答No.2

これはFirefoxのバグではなく、CSSの仕様通りに忠実に解釈しているらしいです。<a><legend>というのは、非置換インライン要素というらしいです。下記に詳しい内容があります。 http://www.mozilla.gr.jp/standards/webtips/webtips0030.html 簡単に言うと、widthは効きませんよってことです。そして、私はと言うとですね、良いか悪いかはさておき、paddingをつかってボックスの大きさの調整をしちゃってます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

kuzumiHK
ベストアンサー率72% (132/183)

2008/05/23 19:55 回答No.3

No.1です。No.2さんのおっしゃるとおり、 aタグなどのインライン要素はwidthが効かないですが、通常はdisplay:blockを指定すれば、 Firefoxであってもwidthが効くようになっています。今回、legendタグにdisplay:blockを指定しても、 widthがまったく効かなかったことから前述にて、思わず「Firefoxのバグ」と言い切ってしまいましたが、 legendタグの使い方を考えると、 Mozillaの方針として効かせなくしているという可能性もありますので、「単なるバグ、もしくはMozillaの方針」に訂正させていただきます。

ログインすると、全ての回答が全文表示されます。