3

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

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

我什至看到了不应使用空 DIV 的建议 - 但规范是否真的说明拥有空 DIV 是“错误的”，或者它只是不可靠？（我已经尝试找到对它们的引用，但也许我使用了错误的术语）。

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

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

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

当然，我已经尝试过发现，但是例如 SO 问题是否需要显示一个空的 <div>？向我暗示在这个领域有大量的“恕我直言”，“可能”，“似乎有效”。我希望现在已经就最佳实践达成了一些官方共识。

所以..我应该使用&nbsp;，如果是的话，我应该将字体大小设置为与 DIV 宽度/高度中的较小者相同，以确保所有浏览器中的空间都被填充？是否有任何其他 CSS 技巧来确保它适用于所有浏览器？

4

2 回答 2

4

The browser is not going to discard or forget your container just because it does not have any contents (yet).

If you want the container to have a specific placeholder shape, then you might give it min-height, min-width, height and width and make sure it's display: block;.

If you are still unsure, you can fill it with a spacer.gif/png without padding and margin.

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

于 2013-06-28T11:15:41.443 回答
3

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

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

jsFiddle 演示

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;
}

资料来源：

于 2013-06-28T11:14:58.883 回答