7

我正在 Aptana 中创建一个网站，并且我正在使用一个空的 div 元素来设置边框底部的样式。

我不能让它成为它的边界元素的一部分，因为它需要始终具有相同的宽度，并且假定的父元素实际上会根据内容改变大小。

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

我说的是“showinfo-border-left/right”类的div

<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>
4

6 回答 6

6

从HTML5 规范：

3.2.8.2.8 可触及内容

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

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

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

于 2013-01-06T15:01:03.770 回答
4

不，这样用也不错。但是您可以使用伪内容来避免这种情况，例如，

.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
 */
}
于 2013-01-06T13:10:17.217 回答
4

来自加速网页的最佳实践

减少 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 标记）。

于 2013-01-06T13:10:42.990 回答
1

如果只有几个或几十个，它不会产生显着差异，如果它们做得很好，你可以使用它们。

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

于 2013-01-06T13:02:51.873 回答
0

可能还需要区分空元素和具有空内容的元素。至少在 FireFox 中，我注意到一个空的 div 元素 () 没有按预期工作，但一个具有空内容的 div 元素却 () 。

于 2014-04-04T12:24:33.867 回答
-2

是的，这看起来很奇怪，但我们广泛使用空 div。比如设置一个精灵作为一个div的背景。每个网站都使用空 Divs。如果你想使用它，那么你可以。没有限制。

于 2013-01-06T13:04:02.893 回答