Question

多年来看到关于使用空DIV的建议似乎发生了变化（即<DIV CLASS="somediv"></DIV>）我对目前关于是否在DIV有时使用 的想法感到困惑没有内在的HTML。

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

我甚至看到过永远不应该使用空DIV的建议 - 但是规格确实说明空DIV是'错误'，还是只是不可靠？（我试过找到它们的参考，但也许我使用了错误的术语）。

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

作为内容的占位符，随后将通过XHR调用
作为在布局中手动创建空间的方法
其中图像在CSS中定义（作为背景图像，但实际上是前景）
文本将使用.somediv:after{content:SOMETEXT}
其中CSS用于使用纯色背景显示图形条等

也许每种方法都有不同的答案，这可能解释了这个问题的复杂性。

我当然已经尝试过发现，但是例如问题Is necessary to show an empty <div>?告诉我，在这个领域有大量的“恕我直言”，“可能”，“似乎有效”。我希望到目前为止已就最佳做法达成了一些官方共识。

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

Answer 1

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

如果您希望容器具有特定的占位符形状，那么您可以给它min-height，min-width，height和width，并确保它是{{1 }}

如果您仍然不确定，可以使用display: block;填充，不填充和填充。

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

Answer 2

简短回答。是的，即使没有内容，浏览器也会渲染div。

答案很长，可能现在总是如此。我已经在网上工作了8年，从来没有使用过这些，但无论如何它们都在这里。

jsFiddle demo

<强> HTML

<div class="empty1"></div>
<div class="empty2"></div>
<div class="empty3"></div>

<强> CSS

.empty1 {
    background: #FBB829;
    height: 100px;
    width: 100px;
}

.empty2:before {
    content: "\00a0";
}
.empty2 {
    background: #FF0066;
    height: 100px;
    width: 100px;
}

.empty3 {
    background: #F02311;
    min-height: 1px;
    height: 100px;
    width: 100px;
}

来源：

我们应该能够信任空DIV以在HTML5中显示吗？

2 个答案: