Safari在Jquery腳本中沒有正確計算寬度

就在我認爲這個腳本終於工作得非常好的時候。唉...Safari在Jquery腳本中沒有正確計算寬度

我有兩個問題，我敢肯定有關係。首先，當頁面最初在Safari中加載時，圖像在一個垂直行中，當它們應該在水平行中浮動時。單擊縮略圖後，此問題消失。

的第二個問題是，當點擊縮略圖時，內容區域不能向外膨脹到它的適當的寬度，這是內容區域其寬度的+ 75％的當前寬度一次。當單擊第二個縮略圖時，此問題消失。在Firefox和IE8中可以看到正確的內容區域擴展行爲。

發生此問題上依賴於擴展腳本兩頁。相關頁面/腳本如下。

<script> 
    $(document).ready(function() { 
     $('#back').hide(); 
     $('#full-wrap').hide(); 
     $('#thumb-wrap a').children().not('img').hide();//hide image captions 

     var moveIt = $('#thumb-wrap').outerWidth(); //Get the width of the thumb-wrap div 

     $('#thumb-wrap a').click(function(){ 

      var $big = $(this).index(); //get 0-based index of the thumb that was just clicked 
      $('#ajax-content > h1').hide();//hide the page title 
      $('#thumb-wrap').hide(); //hide the thumbnails 
      $(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<div class="article"/>').delay(600).fadeIn(); //Clone the image captions and wrap them in an article 
      $('#back').fadeIn(500); //make the back button appear 

      $('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb 
      $('#full-wrap img').eq($big).show(); //reveal fullsized image that does match the index of the clicked thumbnail 

      $('#content').animate({'maxWidth': '+=' + moveIt * 0.5 + 'px', 'left': '6%'}, 'slow'); 
      $('#full-wrap').show(100).animate({ 'right': '+=' + moveIt * 0.75 + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap. 

     }); 

     $('#back').click(function(){ 
      $(this).fadeOut();//hide the back button 
      $('.article').remove();//remove the article div 
      $('#full-wrap').animate({'right': '0', 'opacity' : 'toggle'}, 400);//hide the fullsize image div 
      $('#content').animate({'maxWidth': moveIt, 'left' : '43%'}, 400); 
      $('#thumb-wrap').delay(500).fadeIn(500);//reveal the thumbnails 
      $('#ajax-content > h1').delay(500).fadeIn(100);//show the page title 

     }); 

    }); 
</script>

Page 2

$(document).ready(function() { 
          moveIt = $('#content').outerWidth(); 
         $('#content').delegate('a', 'click', function(e) { 

          var currl = $('#content').offset(); 

          if(currl.left > 300){ 
           $('#content').animate({'maxWidth': '+=' + moveIt/2 + 'px', 'left': '6%'}, 'slow');       
          } 
          else{ 
           $('#content').animate({'maxWidth': '-=' + moveIt/2 + 'px', 'left' : '43%'}, 400); 
          } 
         e.preventDefault(); //Hyperlink won't load page link. 
         }); 
    });

通常Safari瀏覽器的渲染只要Firefox是快樂的罰款。我錯過了什麼？任何幫助，將不勝感激。這個項目在兩個小時內到期，所以我在故障排除時接線。

來源

2011-03-25 qp2wd

我覺得我經歷過這樣的問題面前，它與Safari瀏覽器發射的文檔準備事件早於其他瀏覽器..你的腳本開始時你的圖像可能不會被加載，所以計算寬度和做高度不起作用。嘗試使用jQuery（窗口）.load（）而不是jQuery的（文件）。就緒（）

在這裏看到：http://36flavours.com/2010/01/jquery-document-ready-bug-in-safari-webkit/

來源

2011-03-25 18:30:51 skiplecariboo

也，在＃拇指包你的鏈接，你應該總是使用A HREF屬性，甚至設置爲「＃」，並且你應該使用float：left來使你的馬賽克工作;） – skiplecariboo 2011-03-25 18:42:16

..我不知道縮略圖如何在FF/IE中正確渲染而沒有浮動。我猜＃thumb-wrap寬度足以將它們放入這些瀏覽器的行中，而不是在Safari中。那是固定的，但即使使用'$（window）.load（function（）'，動畫仍然不起作用。初始擴展寬度是錯誤的。 – qp2wd 2011-03-25 18:50:23

Safari在Jquery腳本中沒有正確計算寬度

回答

相關問題