IE9中一個非常奇怪的問題，整個頁面都在跳轉

Question

編輯：客戶端希望通過禁用IE中的單擊和拖動功能進行一些測試，因此目前您將無法復制該錯誤。 我了解這是否會影響社區協助解決最終根本問題的能力。

所以這就是問題所在。 當屏幕高度或更確切地說瀏覽器高度小於網站主容器的高度時，它將在IE9和IE8中發生。 該網站水平滾動，因此其總高度約為700或800像素。

要重現此錯誤，您必須打開以下URL：IE9中的http://dev.gregoryfca.com/ ，並將瀏覽器的高度設置為500或600像素左右。 因此，這將迫使頁面開始從上到下垂直滾動。

將其一直保持在頂部，這樣您仍然可以看到G徽標和菜單以及社交圖標。 然后單擊白色區域，然后放開。 您可以單擊“我們的人員”部分旁邊的白色區域。

單擊開始時，將鼠標拖到右側。 這將開始頁面滾動，並允許您使用水平滾動功能。

所以這里是錯誤。 在IE9中，當瀏覽器高度小於網站總高度時，單擊並拖動中間部分以進行水平滾動時，整個頁面將垂直向下跳轉，因此屏幕的絕對頂部為＃drag-wrapper的頂部元件。

當您水平滾動時，我不希望頁面跳轉。 如果您在Chrome或Firefox中將同樣的情況放在一起，則會發現該錯誤不存在。

我認為這與IE以特定位置對待焦點元素或類似方式有關。 如您所見，該站點使用了大量的jQuery。

有人有任何想法嗎？ 我基本上已經筋疲力盡了。

Answer 1

嘗試給這個CSS類賦予left和top屬性：

#drag-wrapper {
  height: 610px;
  margin: 35px 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  left:0;
  top:150px;
  width: 100%;
  -moz-tap-highlight-color: rgba(0,0,0,0);
  -moz-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  z-index: 4000;
}

如您所見，此類具有position:absolute但它沒有left和top屬性。 如果需要，將margins to 0 。