CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
Display: none将元素从页面中完全移除,并且构建页面时就好像该元素根本不存在一样。
可见性:隐藏保留文档流中的空间,即使您再也看不到它。
这取决于你在做什么,可能有也可能没有很大的区别。
其他回答
显示:none从布局流中移除元素。
可见性:隐藏隐藏它,但离开空间。
可见性:隐藏将元素保留在页面中,并占用该空间,但不显示给用户。
显示:无将在页面中不可用,不占用任何空间。
另一个区别是可见性:hidden在非常非常老的浏览器中有效,而display:none则不行:
https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp
这里有很多详细的答案,但我认为我应该加上这一点来解决可访问性问题,因为其中有影响。
显示:没有;可见性:隐藏;可能不是所有屏幕阅读器软件都能读取。记住视力受损的用户将会经历什么。
这个问题还问了同义词。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/
可见性:隐藏保留空间;显示:没有没有。