css - 显示被用户代理样式表覆盖的属性

Question

很明显，我不是 CSS 专家。我有一堂课

.hidden{
 display:hidden
}

和一个 div

<div class="hidden">
</div>

但是页面渲染时div并没有隐藏。当我查看 Chrome 中的 Computed 样式时，它说 display 属性已被用户代理样式表覆盖。为什么？

score 6 · Accepted Answer

6

CSS：

.hidden {    
    display: none
}

是正确的语法。

于 2012-04-30T16:23:16.997 回答

score 6 · Accepted Answer

如果您希望元素不可见并且不占用任何空间，您应该这样做：

.hidden { display: none; }

但是，如果你想隐藏元素，但让它占据空间，你应该这样做：

.hidden { visibility: hidden; }

有关示例，请参见这个简单的演示。

您认为样式被用户代理覆盖的事实是用户代理无法识别您尝试使用的样式（因为它无效）。

score 0 · Accepted Answer

display:none改为使用

或者使用visibility: hidden或opacity: 0但请不要浏览器支持是粗略的

3 回答 3