<div style="width:50%" />
xHTML でレンダリングされないのはなぜですか? 私がそうする<div style="width:50%"> </div>
だけで、それはレンダリングされます。私は何かが恋しいですか?最小幅は役に立ちますか? 厳格な xHTML 1.0 を使用しています
CSS のみで修正できますか、それとも html マークアップを変更する必要がありますか?
<div style="width:50%" />
xHTML でレンダリングされないのはなぜですか? 私がそうする<div style="width:50%"> </div>
だけで、それはレンダリングされます。私は何かが恋しいですか?最小幅は役に立ちますか? 厳格な xHTML 1.0 を使用しています
CSS のみで修正できますか、それとも html マークアップを変更する必要がありますか?
は、XHTMLまたはHTML DIV
の自己終了要素ではないためです。
<div>
開始タグ ( ) と終了タグ ( ) をペアにする必要があり</div>
ます。
あなたの質問の他の部分について:
<div style="width:50%"> </div>
<div style="width:50%"></div>
違いは、最初のDIV
. 2番目には何もありません。そのため、2 番目のバージョンでは何も表示されません。
また、XML と XHTML は同じものではありません。後者は、タグが一致するペアの一部でない場合、タグを自己終了するという慣習を借りています。
XHTML では通常、自己終了<div />
は避けるべきですが (従来の HTML ブラウザーでは期待どおりに解析されないため)、これは実際には XHTML とは何の関係もありません。これはレイアウトの問題です。
<div></div>
コンテンツを含まないブロック要素です。したがって、その高さはゼロです。あなたはそれを見ることができません。
<div> </div>
1 行のテキストを含むブロック要素です。その高さはline-height
物件と同じです。
空の div に高さを持たせたい場合は、次のように言う必要があります。
<div style="width: 50%; height: 2em; background: red;"></div>
空の div がテキスト行を含んでいるかのように高さでレンダリングされるのは古い IE5 のバグです。標準モードの doctype を使用している場合 (HTML を使用しているか XHTML を使用しているか、Transitional を使用しているか Strict を使用しているかに関係なく使用する必要があります)、この動作は見られません。
XHTML で使用できる自己終了タグは次のとおりです。
<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />
DIV には、開始タグと終了タグの両方が必要です。