I have a div that I use to display alerts when needed.
我有一个div用于在需要时显示警报。
If I want to close it after a while can I use display:none or should I use display:none as well as visibility:hidden?
如果我想在一段时间后关闭它,我可以使用display:none或者我应该使用display:none以及visibility:hidden吗?
So one or both.
所以一个或两个。
Thank you.
3 个解决方案
#1
18
Depends. If you need the space to be left blank, that is, the space won't be taken up by other elements below or around it, you'll need visibility: hidden. Otherwise, use display: none, which will allow other elements to move into the element's place.
要看。如果您需要将空格留空,也就是说,空间不会被其下方或周围的其他元素占用,您将需要可见性:隐藏。否则,使用display:none,这将允许其他元素移动到元素的位置。
There's no reason to use both.
没有理由同时使用它们。
#2
6
If your hidden content needs to be accessible—to those with screen readers, for example—then you should not use display: none or visibility: hidden, as both can potentially hide content from screen readers. Instead, you should use a more accessible approach, such as moving the content off screen with a negative margin. See the following links for more information:
如果你的隐藏内容需要被屏幕阅读器访问 - 例如 - 那么你不应该使用display:none或visibility:hidden,因为两者都可能隐藏屏幕阅读器中的内容。相反,您应该使用更易于访问的方法,例如使用负边距将内容移出屏幕。有关更多信息,请参阅以下链接:
456 Berea Street: Hiding with CSS: Problems and solutions
WebAIM Blog: Hiding content for screen readers
456 Berea Street:隐藏CSS:问题和解决方案WebAIM博客:隐藏屏幕阅读器的内容
#3
6
Visibility:hidden hides the element but it still takes up space in the layout. Display:none removes it completely.
可见性:隐藏隐藏元素但仍占用布局中的空间。显示:none完全删除它。
In your case, I would use Display:none
在你的情况下,我会使用Display:none
#1
18
Depends. If you need the space to be left blank, that is, the space won't be taken up by other elements below or around it, you'll need visibility: hidden. Otherwise, use display: none, which will allow other elements to move into the element's place.
要看。如果您需要将空格留空,也就是说,空间不会被其下方或周围的其他元素占用,您将需要可见性:隐藏。否则,使用display:none,这将允许其他元素移动到元素的位置。
There's no reason to use both.
没有理由同时使用它们。
#2
6
If your hidden content needs to be accessible—to those with screen readers, for example—then you should not use display: none or visibility: hidden, as both can potentially hide content from screen readers. Instead, you should use a more accessible approach, such as moving the content off screen with a negative margin. See the following links for more information:
如果你的隐藏内容需要被屏幕阅读器访问 - 例如 - 那么你不应该使用display:none或visibility:hidden,因为两者都可能隐藏屏幕阅读器中的内容。相反,您应该使用更易于访问的方法,例如使用负边距将内容移出屏幕。有关更多信息,请参阅以下链接:
456 Berea Street: Hiding with CSS: Problems and solutions
WebAIM Blog: Hiding content for screen readers
456 Berea Street:隐藏CSS:问题和解决方案WebAIM博客:隐藏屏幕阅读器的内容
#3
6
Visibility:hidden hides the element but it still takes up space in the layout. Display:none removes it completely.
可见性:隐藏隐藏元素但仍占用布局中的空间。显示:none完全删除它。
In your case, I would use Display:none
在你的情况下,我会使用Display:none