我使用可视性:隐藏来隐藏某些元素,但它们在隐藏时仍然占用页面空间。
我怎么能让它们在视觉上完全消失,就好像它们根本不在DOM中一样(但实际上没有从DOM中删除它们)?
我使用可视性:隐藏来隐藏某些元素,但它们在隐藏时仍然占用页面空间。
我怎么能让它们在视觉上完全消失,就好像它们根本不在DOM中一样(但实际上没有从DOM中删除它们)?
当前回答
使用display:none是一个很好的选择,只是删除一个元素,但它也会被屏幕阅读器删除。也有关于它是否影响SEO的讨论。在a List Apart上有一篇关于这个主题的好文章
如果你真的只是想隐藏而不是删除一个元素,最好使用:
div {
position: absolute;
left: -999em;
}
像这样,它也可以由屏幕阅读器读取。
这种方法唯一的缺点是,这个DIV是实际呈现的,它可能会影响性能,特别是在移动电话上。
其他回答
Display:none隐藏,设置Display:block显示。
下面是关于展示后放回原处的另一种看法:没有。不要使用display:block/inline等。相反(如果使用javascript)设置css属性显示为“(即空白)
使用style代替
<div style="display:none;"></div>
使用display:none是一个很好的选择,只是删除一个元素,但它也会被屏幕阅读器删除。也有关于它是否影响SEO的讨论。在a List Apart上有一篇关于这个主题的好文章
如果你真的只是想隐藏而不是删除一个元素,最好使用:
div {
position: absolute;
left: -999em;
}
像这样,它也可以由屏幕阅读器读取。
这种方法唯一的缺点是,这个DIV是实际呈现的,它可能会影响性能,特别是在移动电话上。
看,与其使用可见性:隐藏;使用display: none;。第一个选项将隐藏,但仍然占用空间,第二个选项将隐藏,但不占用任何空间。