Question

在我的网页上遇到问题，主页中的页脚没有针对某个特定页面正确显示。在那个页面上，我有一个

<div style="clear:both" />位于底部。

在我的头撞了一会儿之后，我发现所有我需要改变以使页脚正确显示是将该行更改为：

<div style="clear:both"></div>

我不明白为什么用这种方式写它会产生不同的结果。它们在语义上是不相同的吗？我检查并仔细检查了这是我做的唯一改变。在两者之间来回翻转会改变页脚的行为。

所以我的问题是......那些不相同吗？它们之间有什么区别？

编辑：奇怪的是，他们都在我们想要的页面上面的东西。我的意思是，在自我关闭的div标签的情况下，如果我完全删除它，页面肯定会做出反应，所以它必须用它做SOMETHING而不是完全忽略它。

Answer 1

<div />不是有效的标记。不允许使用自动关闭标签。

您需要使用完整版<div></div>。

自我关闭的div标签没有任何意义，因为它会导致空div。大多数浏览器通常不会呈现空div。

Answer 2

根据HTML 4.01 spec，第7.5.4节（“分组元素：DIV和SPAN元素”：

开始标记：必需，结束标记：必需

因此，自动关闭的<div>代码（与您指定的第一个示例<div />一样）无效。

Answer 3

如果我没记错 - <div />无效。如果您希望它可以在任何地方使用，请使用<div></div>。结束标记是必需的，因此像<div class="Clear" />这样的操作将无效。

所有分组元素的行为方式都相同。你会看到DIV和SPAN都有相同的行为。

编辑：找到this link同时查看@Donut发布的答案中的链接 - 它是一个矩阵，显示哪些元素有可选的结束标记要求（等等。）看起来很有趣，所以我想我我会把它发布在这里与其他人分享。

Answer 4

这取决于您正在使用的DOCTYPE。

对于XHTML，这是XML，这两个标签是等价的。您可以通过将以下DOCTYPE之一添加为页面的第一行来向浏览器发出此信号：

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

对于HTML 4.01，这是所有（？）浏览器在没有DOCTYPE时所假设的，某些标签必须表示为开 - 关。大多数块级标记都需要这样，包括<SCRIPT>等非标记标记。如果您查看WDG HTML documentation，您会看到特定代码是否需要打开 - 关闭，或者可以通过“语法”项表示为空标记：

Syntax      <DIV>...</DIV>

Answer 5

自终止标记在XML中有效，但在这种情况下不适用于HTML

Answer 6

第一个选项不是有效的html;第二是。 <div />确实混淆了IE，因此请始终使用<div><div/>。

Answer 7

您无法将内容放入“<div />”。

Answer 8

<div />有效，具体取决于您DOCTYPE有效的XHTML Transitional＆amp; XHTML严格

DEMO ：http://wecodesign.com/demos/stackoverflow-1411182.htm

确认：http://validator.w3.org/check?uri=http%3A%2F%2Fwecodesign.com%2Fdemos%2Fstackoverflow-1411182.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

如果您想使用单个代码并且页面上没有无用的空<div>，请尝试使用<br />进行清除。

<style type="text/css">
.clear-fix {
    float: none !important;
    height: 0 !important;
    overflow: hidden !important;
    clear: both !important;
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
</style>

<br class="clear-fix" />

有些人可能会质疑我在这里使用!important;然而，这就是它存在的原因！我们知道，当我们清除某些内容时，我们希望它能够执行特定任务，无论。

以例如：

<style type="text/css">
    .hidden {display: none;}
    #foo {display: block;}
</style>

<p id="foo" class="hidden">You can still see me</p>

在这种特殊情况下，您可以将!important添加到隐藏的类中，因为很明显它应该隐藏无论什么

<div>和<div> </div>之间有区别吗？</div>

8 个答案: