jQuery slideDown導致wrapper div在firefox中移位

我在一個包含div的div（即「wrapper」div）中有一個div。該包裝div的邊距設置爲自動，因此它位於頁面的中心。當你點擊一個按鈕時，使用jQuery的slideDown函數顯示wrapper div中的另一個div。但是，當發生這種情況時，wrapper div會將幾個像素向左移動，並且當您再次單擊該按鈕以使div通過jQuery的滑動功能消失時，它會移回。這裏是我的代碼，div.answer是包裝DIV中，你通過點擊該按鈕jQuery slideDown導致wrapper div在firefox中移位

CSS顯示/隱藏DIV：

#wrapper { 
     background: url(myimages/bground.jpg); 
     text-align: center; 
     margin: auto; 
     width:1020px; 
     border:0px solid red; 
    } 

    div.answer{ 
     border: 0px solid #5c5c5c; 
     padding:3px; 
     margin-left: 29px; 
     margin-right: 29px; 
     display:none; 
    }

的Javascript：

$('span.problemBullet').toggle(function(){ 
     $('div.answer').slideDown(); 
     $(this).html('&nbsp;-&nbsp;'); 
     $(this).css('padding','0px 2px 0px 2px'); 

    }, 
     function(){ 
      $('div.answer').slideUp(); 
      $(this).html('&nbsp;+&nbsp;'); 
      $(this).css('padding', '0px 0px 0px 0px'); 

     } 

    );

「problemBullet」是我從span元素創建的一個小按鈕讓你點擊以獲得div顯示和隱藏

這在Google Chrome和Safari中正常工作。

您可以在這裏的行動看出來： Click me

來源

2012-08-23 MRichards

請張貼的HTML也:-) – andyb

我有一個問題，一個時間，其中我不得不添加'溢出：隱藏;'到滑動物體。值得嘗試。 – romo

如果用'show'和'hide'替換'slidedown'和'slideup'，你會遇到同樣的問題嗎？ – ebohlman

像這種情況是因爲滑下這個div增加身體的高度，以一個點，它比視口大的評論中指出，造成滾動條出現並因此將整個內容移向左側。

我最好的解決辦法是默認顯示滾動條與此CSS：

body { 
    overflow-y: scroll; 
}

來源

2013-01-08 14:45:11 Simon

jQuery slideDown導致wrapper div在firefox中移位

回答

相關問題