多年来,关于使用空 DIV(即 <DIV CLASS="somediv"></DIV>
)的建议似乎有所改变,我对目前是否使用
的想法感到困惑。当 DIV 没有内部 HTML 时。
关于我们是否可以依赖所有现代浏览器在没有内部 HTML 的情况下以指定的宽度和高度正确显示背景颜色和图像,我找不到明确的确认,所以我想也许我们不能依赖它 - 但它是一个看似基本的区域。
我什至看到过不应该使用空 DIV 的建议 - 但规范是否真的声明使用空 DIV 是“错误的”,或者它只是不可靠? (我试过查找对它们的引用,但也许我使用了错误的术语)。
为了说明,这里有 5 个区域,在没有任何推荐的替代方案的情况下,我通常会使用空 DIV:
- 作为随后将由 XHR 调用获取的内容的占位符
- 作为在布局中手动创建空间的一种方式
- 在 CSS 中定义图像的位置(作为背景图像,但实际上是前景)
- 使用
.somediv:after{content:SOMETEXT}
的 CSS 文本 - 其中 CSS 用于使用纯色背景显示图形条等
也许每个问题都有不同的答案,这或许可以解释这个问题的复杂性。
当然,我已经尝试过发现问题,例如 SO 问题 Is necessary to show an empty <div>?对我来说,在这个领域有大量的“恕我直言”、“可能”、“似乎有效”。我希望现在已经就最佳实践达成一些官方共识。
那么..我应该使用
吗?如果是这样,我应该将字体大小设置为与 DIV 宽度/高度中的较小者相同,以确保在所有浏览器中填充空间吗?是否有任何其他 CSS 技巧可以确保它适用于所有浏览器?
最佳答案
浏览器不会仅仅因为它还没有任何内容就丢弃或忘记您的容器。
如果你想让容器有一个特定的占位符形状,那么你可以给它 min-height
, min-width
, height
和 width
并确保它是 display: block;
。
如果你还是不确定,你可以用一个spacer.gif/png
来填充它,不带填充和边距。
关于html - 我们是否应该能够信任空 DIV 在 HTML5 中显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17363239/