2

我见过许多插件/库,包括 jQuery mobile,为了隐藏元素更改它的 left 和/或 top 属性,如下所示:

div {
   left : 99999px;
   top : 99999px;
}

现在这种情况很多时候会弄乱我的代码,因为它并不总是消失,有时会增加该属性的滚动条,所以我发现自己编辑了几个插件和 css 来隐藏元素使用display:none;

而且我一直想知道人们是否有理由选择这样做而不是切换显示属性,或者这只是上述开发人员的不良做法。

这两种方法之间有什么性能差异吗?是否有任何 javascript 代码无法在隐藏元素上运行?更好的方法是什么?

4

1 回答 1

2

TLDR;: 屏幕阅读器

以下是使元素不可见的不同方法:

  • display:none;将元素从流中取出。文档呈现为好像该元素不存在一样。所以该元素不会被屏幕阅读器发声

  • 然后你有visibility:hiddenwhich 使盒子不可见,但仍然影响 layout

  • 最后,您可以使用诸如绝对定位和偏移量之类的技巧,以使元素消失而不影响布局,同时仍然发出声音。这是取自 HTML5 Boilerplate 的示例:

    .visuallyhidden {
    
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    
于 2013-02-25T11:05:10.780 回答