为什么我在浏览器中看不到页面内容？

Question

我不确定是什么问题，但我的CSS无效，我无法弄清楚究竟是什么问题因为我是CSS的新手。我在Chrome和Firefox上尝试过代码，需要有人来解释真正的问题。

这是一个Chrome屏幕截图，当我检查该元素时，它突出显示浏览器上的<div>，但它不可见。

此截图来自Firefox，我使用的是Firebug，但有趣的是，浏览器上看不到的所有内容都有不同于浏览器上可见内容的颜色（灰色）。

有谁能解释我如何解决这个问题？

Answer 1

Firebug中的苍白显示表示该元素不可见。 According to the Firebug wiki这可能有不同的原因：

  

微弱的显示元素意味着它们在页面内不可见。那是例如当CSS样式display: none应用于元素或元素没有任何尺寸时。

所以看起来<div>与id ebBannerDiv_...的祖先是隐藏的（意味着它的offsetWidth和/或offsetHeight DOM属性是0）因此也隐藏了它的所有孩子。

可能与font-size和line-height 0px的{​​{1}}相关。

如需进一步调查，您可以通过Layout side panel查看该元素的尺寸和展示率。如果您看到<div>设置为display或其宽度或高度为none，则可以通过检查{{1}的样式跟踪进一步调查Computed side panel中的}，0，width，height和display属性。