CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?


当前回答

另一个区别是可见性:hidden在非常非常老的浏览器中有效,而display:none则不行:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

其他回答

它们不是同义词——display:没有一个会从页面流中移除元素,页面的其余部分就像它不存在一样。

可见性:hidden在视图中隐藏元素,但不隐藏页面流,在页面上为其留下空间。

可见性:隐藏将元素保留在页面中,并占用该空间,但不显示给用户。

显示:无将在页面中不可用,不占用任何空间。

显示:没有

它将从页面的正常流程中删除元素,允许其他元素填充。

一个元素将不会出现在页面上,但我们仍然可以通过DOM与它交互。 在其他元素之间不会为它分配空间。

可见性:隐藏

它会将元素保留在页面的正常流程中,这样仍然会占用空间。

一个元素是不可见的,并且在页面上为它分配了element的空间。

其他隐藏元素的方法

使用z - index

#element {
   z-index: -11111;
}

将元素移出页面

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

关于可见性:hidden和display: none属性的有趣信息

可见性:隐藏和显示:没有一个会是同样的表现,因为它们都会重新触发布局,油漆和合成。然而,不透明度:0的功能等同于可见性:隐藏,并且不会重新触发布局步骤。

css转换属性也很重要,我们需要注意。因为从可见性:hidden切换到可见性:visible允许使用css转换,而从display: none切换到display: block则不行。visibility: hidden具有不捕获JavaScript事件的额外好处,而opacity: 0则捕获事件

除了所有其他答案外,IE8还有一个重要的区别:如果你使用display:none并试图获取元素的宽度或高度,IE8将返回0(而其他浏览器将返回实际的大小)。IE8仅为可见性返回正确的宽度或高度:隐藏。

这里有很多详细的答案,但我认为我应该加上这一点来解决可访问性问题,因为其中有影响。

显示:没有;可见性:隐藏;可能不是所有屏幕阅读器软件都能读取。记住视力受损的用户将会经历什么。

这个问题还问了同义词。indent: -9999 px;是另一个大致相等的。文本缩进的重要区别在于它通常由屏幕阅读器读取。这可能是一个有点糟糕的体验,因为用户仍然可以点击链接。

对于可访问性,我现在看到的是一种样式的组合,在对屏幕阅读器可见的情况下隐藏元素。

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

一个很好的做法是创建一个“跳转到内容”链接到内容主体的锚。视力受损的用户可能不想在每个页面上都听完整的导航树。使链接在视觉上隐藏。用户只需点击标签就可以访问链接。

有关可访问性和隐藏内容的更多信息,请参见:

https://webaim.org/techniques/css/invisiblecontent/ https://webaim.org/techniques/skipnav/