为什么<div style =“width：50％”>不在xHTML中呈现？</div>

Question

为什么{x}不会在xHTML中呈现<div style="width:50%" />？ 如果我只做<div style="width:50%"> &nbsp; </div>那么它就会被渲染。我错过了什么吗？ 最小宽度会有帮助吗？ 我使用严格的xHTML 1.0

是否可以仅使用CSS修复它，或者我必须更改html标记？

Answer 1

因为DIV不是XHTML 或 HTML中的自闭元素。

您必须将开头标记（<div>）与结束（</div>）配对。

关于你问题的另一部分：

<div style="width:50%">&nbsp;</div>

<div style="width:50%"></div>

之间的区别在于，在第一个中有一个填满DIV的不间断空格字符。在第二个没有。这就是为什么你不会在第二个版本上看到任何渲染。

此外，XML和XHTML不是一回事。如果标签不是匹配对的一部分，后者借用了自动关闭标签的惯例。

Answer 2

虽然在XHTML中通常应该避免自我关闭<div />（因为它不会像在传统的HTML浏览器中那样解析），但这实际上与XHTML无关：这是一个布局问题。 / p>

<div></div>

是不包含任何内容的块元素。因此它的高度为零;你看不到它。

<div>&nbsp;</div>

是包含一行文本的块元素。它的高度等于line-height属性。

如果你想要一个空的div有一些高度，你必须这样说：

<div style="width: 50%; height: 2em; background: red;"></div>

这是一个旧的IE5错误，空div仍然会以高度呈现，就像它包含一行文本一样。当您使用标准模式doctype时（无论您使用的是HTML还是XHTML，Transitional或Strict，都应该使用它），您将看不到此行为。

Answer 3

XHTML中允许的自动关闭标签如下：

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

DIV必须同时包含起始和结束标记。