我正在 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>
【问题讨论】：
3.2.8.2.8 触手可及的内容
作为一般规则，其内容模型允许任何流式内容或短语内容的元素应至少具有一个子节点，该子节点是可触知的内容并且没有指定隐藏属性。
然而，这个要求不是硬性要求，因为在很多情况下元素可以合法地为空，例如，当它用作稍后将由脚本填充的占位符时，或者当元素是模板的一部分，在大多数页面上会被填写，但在某些页面上不相关。
因此，由于 div 允许流动内容。空 div 通常是要避免的，但不是无效的，也不是什么可以挂断的。
来自Best Practices for Speeding Up your Webpage
复杂的页面意味着要下载更多字节，这也意味着 JavaScript 中的 DOM 访问速度较慢。例如，当您想要添加事件处理程序时，如果您在页面上循环遍历 500 或 5000 个 DOM 元素，则会有所不同。
大量的 DOM 元素可能是一种症状，表明应该通过页面标记来改进某些内容，而不必删除内容。您是否出于布局目的使用嵌套表？您是否只是为了解决布局问题而投入更多<div>s？也许有一种更好、更语义正确的方式来做你的标记。
YUI CSS 实用程序对布局有很大帮助：grids.css 可以帮助您进行整体布局，fonts.css 和 reset.css 可以帮助您去除浏览器的默认格式。这是一个重新开始并考虑您的标记的机会，例如，仅在语义上有意义时才使用<div>s，而不是因为它呈现新行。
DOM 元素的数量很容易测试，只需在 Firebug 的控制台中输入：
document.getElementsByTagName('*').length
多少 DOM 元素太多了？检查其他具有良好标记的类似页面。例如雅虎！主页是一个非常繁忙的页面，并且仍然少于 700 个元素（HTML 标记）。
【讨论】：
不，这样使用也不错。 但是您可以使用伪内容来避免这种情况，例如，
.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
*/
}
【讨论】：
:after 伪类不受所有浏览器/版本 see here 的支持，您必须使用 JS hacks 才能使其在 IE7 等中运行
如果只有几个或几十个，它不会产生显着差异，如果它们做得很好，你可以使用它们。
但是如果你有大约一百个或更多，那么你应该重新考虑你的方法，因为它会增加 DOM 元素的数量。一般来说，DOM 元素越少越好。更多关于优化的信息可以在这个关于优化的优秀Yahoo's article 中找到。
【讨论】：
可能还需要区分空元素和具有空内容的元素。至少在 FireFox 中，我注意到一个空的 div 元素 () 没有按预期工作，但一个内容为空的 div 元素却是 ()。
【讨论】：
是的，这看起来很奇怪，但我们广泛使用空 div。比如设置一个精灵作为一个div的背景。每个网站都使用空 Divs。如果你想使用它，那么你可以。没有限制。
【讨论】：