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

Question

我见过很多插件/库，包括jQuery mobile，以便隐藏 一个元素改变它的左边和/或顶部属性，如下：

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;
  }