CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
Display:none将隐藏元素并折叠正在占用的空间,而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。
其他回答
显示:none从布局流中移除元素。
可见性:隐藏隐藏它,但离开空间。
Display:none将隐藏元素并折叠正在占用的空间,而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。
另一个区别是可见性:hidden在非常非常老的浏览器中有效,而display:none则不行:
https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp
除了所有其他答案外,IE8还有一个重要的区别:如果你使用display:none并试图获取元素的宽度或高度,IE8将返回0(而其他浏览器将返回实际的大小)。IE8仅为可见性返回正确的宽度或高度:隐藏。
如果可视性属性设置为“hidden”,浏览器仍然会在页面上为内容占用空间,即使它是不可见的。 但是当我们将一个对象设置为“display:none”时,浏览器不会在页面上为其内容分配空间。
例子:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>
查看详细信息