空div是不是很糟糕？

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

从HTML5 规范：

3.2.8.2.8 可触知的内容

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

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

因此，由于 div 允许流内容。空的 div 通常是要避免的，但不是无效的，也不是可以挂断的。

Answer 2

来自加快网页速度的最佳实践

减少 DOM 元素的数量

复杂的页面意味着需要下载更多的字节，并且还意味着 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 标签）。