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

标签 html css

多年来,关于使用空 DIV(即 <DIV CLASS="somediv"></DIV>)的建议似乎有所改变,我对目前是否使用 &nbsp; 的想法感到困惑。当 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>?对我来说,在这个领域有大量的“恕我直言”、“可能”、“似乎有效”。我希望现在已经就最佳实践达成一些官方共识。

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

最佳答案

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

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

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

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

关于html - 我们是否应该能够信任空 DIV 在 HTML5 中显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17363239/

相关文章:

html - 我的 CSS 不响应 ID 和类标识符

jquery - SVG加载缓慢

html - 响应式下拉菜单 - 隐藏的li无法点击

javascript - jquery 动画在第一次运行时无法正常工作

html - 了解菜单在 html5 和 css3 中的工作原理

html - 当它溢出父 div 时,我想为子 div 添加滚动而不设置任何高度

css - Chrome 边距错误

html - Twitter Bootstrap 按钮下拉 z-index 分层问题

html - CSS div布局定位

javascript - 为什么使用 ng-repeat 时图表会附加到现有的 div 中?