Question

我正在Aptana制作一个网站，我正在使用一个空的div元素来设计边框底部。

我无法将其作为边框的一部分，因为它需要始终具有相同的宽度，并且假定的父元素实际上会根据内容更改大小。

问题：使用像这样的空div是不是很糟糕？ Aptana给了我一个警告。它说我“应该修剪空div”。

我在谈论这里的div与“showinfo-border-left / right”这个类

<div class="showinfo">
    <div class="showinfo-left">Text</div>
    <div class="showinfo-right">More text</div>
</div>
    <div class="showinfo-border-left"></div>
    <div class="showinfo-border-right"></div>

Answer 1

不，这样使用它并不坏。但你可以使用psudeo内容来避免这种情况，例如，

.showinfo:after{
content: "";
display: block;
/*
 this will be the style for your div after
 but dont forget to specifiy the width and height and act like its a new div
 */
}

Answer 2

来自Best Practices for Speeding Up your Webpage

减少DOM元素的数量

复杂页面意味着要下载更多字节，这也意味着JavaScript中的DOM访问速度更慢。如果您想要添加事件处理程序，例如，在页面上循环500或5000个DOM元素，则会有所不同。大量的DOM元素可能是一个症状，即应该通过页面标记来改进，而不必删除内容。您是否使用嵌套表进行布局？你是否只是为了解决布局问题而投入更多？也许有一种更好，更语义正确的标记方式。 YUI CSS实用程序提供了很好的布局帮助：grids.css可以帮助您完成整体布局，fonts.css和reset.css可以帮助您去除浏览器的默认格式。这是一个重新开始并考虑你的标记的机会，例如只有在语义上有意义时才使用s，而不是因为它呈现一个新行。 DOM元素的数量很容易测试，只需键入Firebug的控制台： document.getElementsByTagName（ '*'）。长度有多少DOM元素太多了？检查具有良好标记的其他类似页面。例如雅虎！主页是一个非常繁忙的页面，仍然不到700个元素（HTML标记）。

Answer 3

来自the HTML5 spec：

3.2.8.2.8可触及内容

作为一般规则，其内容模型允许任何流内容或短语内容的元素应至少有一个子节点是可触及的内容，并且没有指定隐藏属性。

然而，这个要求并不是一个严格的要求，因为很多情况下元素可以合法地为空，例如当它用作占位符，稍后将由脚本填充，或者元素是模板的一部分，并且在大多数页面上都会被填写但在某些页面上是不相关的。

因为div允许流内容。空的div通常是要避免的，但不是无效的，也不是任何可以挂掉的东西。

Answer 4

如果它只是它们中的几个或几十个，它将不会产生显着差异，如果它们能很好地完成工作，你可以使用它们。

但如果你有大约一百个或更多，那么你应该重新考虑你的方法，因为它会增加DOM元素的数量。一般来说，DOM元素越少越好。有关优化的更多信息可以在优秀的Yahoo's article优化中找到。

Answer 5

可能还需要区分空元素和具有空内容的元素。至少在FireFox中我发现空div元素（）没有按预期工作，但是带有空内容的div元素确实是（）。

Answer 6

是的，这似乎很奇怪，但我们广泛使用空div。例如将精灵设置为div的背景。每个网站都使用空的Div。如果你想使用它，那么你可以。没有限制。

空div是不是很糟糕？

6 个答案:

减少DOM元素的数量

3.2.8.2.8可触及内容