显示由用户代理样式表覆盖的属性

Question

显而易见，我不是CSS专家。我有一个班级

.hidden{
 display:hidden
}

和div

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

但是在呈现页面时不会隐藏div。当我查看Chrome中的Computed样式时，它表示显示属性已被用户代理样式表覆盖。为什么呢？

Answer 1

的CSS：

.hidden {    
    display: none
}

是正确的语法。

Answer 2

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

.hidden { display: none; }

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

.hidden { visibility: hidden; }

有关示例，请参阅此simple demo。

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

Answer 3

使用display:none代替

或者使用visibility: hidden或opacity: 0，但请不要使用浏览器支持