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

Question

我见过很多的插件/库，包括jQuery Mobile的，为了隐藏 的元素来改变它的左和/或顶级属性，例如：

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

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

我一直在想，财产，或者说这只是开发者的糟糕做法。

这两种方法之间是否存在任何差异？是否有任何JavaScript代码不能在隐藏的元素上运行？什么是更好的方法？

Answer 1

TLDR; ：屏幕阅读器

这里有不同的方法，使一个元素无形：

• display:none;需要的元素跳出流程。该文档呈现为该元素不存在。所以元素是没有被屏幕阅读器发声。

• 然后你有visibility:hidden这使得箱子不可见，但仍然影响布局。

• 最后，你有一个像与偏移绝对定位的黑客，使元素消失，而不会影响布局同时还发声它。下面是HTML5的样板采取了一个例子：我认为这是无障碍的问题

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