css - 哪个是视觉隐藏事物的更好方法，clip: rect(0, 0, 0, 0) 或 visibility: hidden？

Question

最近，我看到了一些隐藏东西的技巧。我很好奇 和 之间有什么区别clip: rect(0, 0, 0, 0);，visibility: hidden;而两者都可以隐藏东西并同时保持空间。

clip: rect(0, 0, 0, 0);另外，使用和之间有什么区别clip: rect(1px, 1px, 1px, 1px);吗？

Answer 1

从视觉上看，一个clipped 元素是折叠的，就像一个带有display: noneis 的元素一样。visibility: hidden另一方面，保留元素通常使用的空间。

换句话说，比较clip和visibility非常像苹果和橘子，你应该比较clip和display。

我想使用其中一个的一个原因是可访问性：

• visibility: hidden对屏幕阅读器隐藏内容。

• display: none对屏幕阅读器隐藏内容。

• clip: rect(0,0,0,0); position: absolute使屏幕阅读器可以看到内容。

兼容性： MDN 标记clip为已弃用，clip-path是较新的替代品。