html - 我们是否应该能够信任空 DIV 在 HTML5 中显示？

Question

多年来，关于使用空 DIV(即 <DIV CLASS="somediv"></DIV>)的建议似乎有所改变，我对目前是否使用   的想法感到困惑。当 DIV 没有内部 HTML 时。

关于我们是否可以依赖所有现代浏览器在没有内部 HTML 的情况下以指定的宽度和高度正确显示背景颜色和图像，我找不到明确的确认，所以我想也许我们不能依赖它 - 但它是一个看似基本的区域。

我什至看到过不应该使用空 DIV 的建议 - 但规范是否真的声明使用空 DIV 是“错误的”，或者它只是不可靠？ (我试过查找对它们的引用，但也许我使用了错误的术语)。

为了说明，这里有 5 个区域，在没有任何推荐的替代方案的情况下，我通常会使用空 DIV:

1. 作为随后将由 XHR 调用获取的内容的占位符
2. 作为在布局中手动创建空间的一种方式
3. 在 CSS 中定义图像的位置(作为背景图像，但实际上是前景)
4. 使用 .somediv:after{content:SOMETEXT} 的 CSS 文本
5. 其中 CSS 用于使用纯色背景显示图形条等

也许每个问题都有不同的答案，这或许可以解释这个问题的复杂性。

当然，我已经尝试过发现问题，例如 SO 问题 Is necessary to show an empty <div>?对我来说，在这个领域有大量的“恕我直言”、“可能”、“似乎有效”。我希望现在已经就最佳实践达成一些官方共识。

那么..我应该使用 吗？如果是这样，我应该将字体大小设置为与 DIV 宽度/高度中的较小者相同，以确保在所有浏览器中填充空间吗？是否有任何其他 CSS 技巧可以确保它适用于所有浏览器？

Answer 1

浏览器不会仅仅因为它还没有任何内容就丢弃或忘记您的容器。

如果你想让容器有一个特定的占位符形状，那么你可以给它 min-height, min-width, height和 width 并确保它是 display: block;。

如果你还是不确定，你可以用一个spacer.gif/png来填充它，不带填充和边距。

http://jsfiddle.net/APxNF/1/