我使用可视性:隐藏来隐藏某些元素,但它们在隐藏时仍然占用页面空间。

我怎么能让它们在视觉上完全消失,就好像它们根本不在DOM中一样(但实际上没有从DOM中删除它们)?


当前回答

使用display:none是一个很好的选择,只是删除一个元素,但它也会被屏幕阅读器删除。也有关于它是否影响SEO的讨论。在a List Apart上有一篇关于这个主题的好文章

如果你真的只是想隐藏而不是删除一个元素,最好使用:

div {
  position: absolute; 
  left: -999em;
}

像这样,它也可以由屏幕阅读器读取。

这种方法唯一的缺点是,这个DIV是实际呈现的,它可能会影响性能,特别是在移动电话上。

其他回答

使用display:none是一个很好的选择,只是删除一个元素,但它也会被屏幕阅读器删除。也有关于它是否影响SEO的讨论。在a List Apart上有一篇关于这个主题的好文章

如果你真的只是想隐藏而不是删除一个元素,最好使用:

div {
  position: absolute; 
  left: -999em;
}

像这样,它也可以由屏幕阅读器读取。

这种方法唯一的缺点是,这个DIV是实际呈现的,它可能会影响性能,特别是在移动电话上。

据我所知,这有四种可能

巴顿HTML < style = "显示屏:郎;“巴顿> < - > 没有人;的 jQuery道具(“# buttonId美元)。(“显示屏”:“郎”);与$(“buttonId”).css(“opacity”,0);

由于我一直在解决这个问题并进行研究,所以我想分享一下我的见解。如果您已经进入了这个页面,我假设您正在试图弄清楚为什么您的元素占用了页面上的空间,即使有样式。Display = "none"。

最有可能的是,造成这种情况的原因并不是存在问题的元素;而是它的孩子、父母或兄弟姐妹。打开控制台,转到Elements选项卡。看看里面有什么可能占据空间的线索。也许你正在使用模板引擎,并没有意识到<br>是在动态<div>之外呈现的。或者,您应该瞄准嵌套更多的元素。在进行故障排除时,请尝试按照这些思路进行思考。

$('#abc').css({"display":"none"});

这将隐藏内容,也不会留下空白。

感谢这个问题。我想要的正好相反,即一个隐藏的div仍然应该占据它在浏览器上的空间。因此,我使用visibility: hidden而不是display: none。