具有顯示屬性或左/頂部的隱藏元素？

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