隐藏具有显示属性或左/上的元素？

Question

我见过很多插件/库，包括 jQuery mobile，为了隐藏 一个元素会改变它的 left 和/或 top 属性，例如：

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

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

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

这两种方法在性能上有什么区别吗？是否有任何 javascript 代码无法在隐藏元素上运行？更好的方法是什么？

Answer 1

TLDR; : 屏幕阅读器

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

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

• 然后你有 visibility:hidden 使框不可见，但仍会影响布局。

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

  .visuallyhidden {
  
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
  }